Пишу про разработку вообще и в частности про: JavaScript, HTML5, CSS3, AngularJS, ReactJS, Agile, Bitcoins

Frontend аудит сайта – vc.ru

Для начала небольшой дисклаймер – в таких обзорах передо мной не стоит целью рассказать о недостатках сайта. На самом деле я искренне придерживаюсь идеи: “Если это работает, то это не уродливо”. Вместе с тем, мне всегда интересно посмотреть на код других команд, подумать над тем как я бы подошел к решению подобных задач и заодно дать пример читателям.

Хорошо собранные сайты сложно разбирать, потому что в них не много ошибок 🙂 Однако, это не повод останавливаться, сегодня поговорим о сайте vc.ru

vc-ru

CSS

CSS сделан по БЭМ, вопросов к этому почти нет. Встречается некое смешение стилей, но не сильное и придираться сильно не хочется. Все сделано хорошо, каскадов почти нет. Единственный момент – имеет смысл объединить все файлы стилей, который загружаются с vc.ru, нет никакого преимущества в том, что они грузятся по отдельности.

Network

Не использует gzip на стороне сервера. Имеет смысл включить – меньше файлы будут для отправки на сторону клиента:

vc-gzip

JS

Сайт использует два основный файла для js:

Подход нормальный, хоть и не обязательный, потому что оба файла все равно будут подгружаться на каждой странице. Плюс в том, что первый файл подгружает до того как рендерится html, а второй уже после. Таким образом можно разделить код на тот что должен исполнится в самом начале, до того как вообще что-то появилось, и тот что может начать работать потом.

В данном случае такой подход облегчает рендер страницы и пользователь видит данные раньше. Сценарий получается следующий:

1. Загружается app.top.min.js, на это уходит чуть меньше секунды (800-900 мс), его эвалюация занимает всего 30 мс. Рендер потом не нагружается, поэтому почти сразу виден контент.

2. Пользователь уже видит содержимое страницы, но интерактивные элементы еще не готовы (прошло 2,5 секунды после запросы).

3. Через 3,5 секунды закончен рендер основного html и браузер начинает загружать app.bottom.min.js, на это тоже уходит меньше секунды.

4. Теперь начинается “тяжелая работа”. Эвалюация app.bottom.min.js занимает уже 1080 мс, поскольку в этом файлы самые “весомые” скрипты приложения.

Теперь достаточно очевидно зачем разделять js на две части – пользователь раньше видит контент. Это основная цель любого сайта – вывести контент как можно раньше.

Давайте посмотрим на сам код.

Антипаттерн jQuery обертки. Классический случай – зачем столько раз обертывать
$(this)
, лучше сделать один раз и сохранить в переменную:

vc-jquery-antipattern

Вместо этого стоит сделать вот так var $this = $(this);, а потом уже исользовать $this. А еще лучше вот так:

Обратите внимания, что js по сути получает состояние из html и в нем же потом его будет хранить. При изменении идет отправка данных на сервер:

vcru-post

Достаточно распространенный подход для написания кода, когда разработка забазирована на jQuery. Основная сложность в поддержании кодовой базы при этом в том, что состояние приложения получается размазанным и если нужно вносить изменения, то приходится править во многих местах. Как следствие баги начинают лезть со всех сторон.

Более правильным было бы хранить состояние в некой модели и изменять html в зависимости от изменений самой модели. Такой подход поддерживается всеми фреймворками: backbone, angular, react (в сцепке с flux, redux или чем-то подобным), и т.п. Конечно можно и самому написать, было бы желание.

Поделиться:
comments powered by Disqus