Оптимизация CSS

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

После того, как браузер загрузил необходимые файлы, он начитает первращать эту кучу кода в интерфейс. И, на самом деле, это достаточно сложный процесс. Браузер анализирует код HTML и строит из него DOM – Document Object Model, корневым элементом которого является тег <html>. Затем идет обработка CSS-правил, которые, проще говоря, накладываются на наш DOM.

Основными понятиями здесь являются пересчет (reflow) и перерисовка (repaint). Это события, которые выполняются браузером после изменения элементов на странице. В идеале, эти события должны выполняться только один раз после загрузки страницы, однако сейчас такое практические не встречается.

Что может вызвать reflow? Любое изменение геометрии объекта на странице. Часто reflow одного элемента может повлечать собой пересчет всей страницы, что является достаточно трудоемкой задачей. Событие repaint может вызвать, например, изменение цвета элемента на странице.

Теперь коротко поговорим о тех хаках, которые можно применить для ускорения вашего сайта.

Сокращайте количество событий reflow

Как мы уже говорили, любое изменение геометрии объекта на странице вызывает событие пересчета. Поэтому, например, если вам необходимо сделать несколько изменений, имеет смысл сначала скрыть элемент через $('.class').hide();, сделать необходимые изменения и потом снова показать элемент.

Часто можно встретить код, когда происходит вставка множества элементов в DOM в цикле. Такие конструкции тоже нужно оптимизировать и вставлять элементы пачкой. Думаю, суть вы поняли.

Забудьте про универсальный селектор

Первое зло, от которого стоит отказаться – универсальный селектор. Например, такой код является достаточно тяжелым для браузера:

* { margin: 0; }

Таким образом, будут выбраны все элемены на странице и к каждому из них будет применены указанные правила.

Не используйте каскад

Не смотря на то, что CSS – это каскадные таблицы стилей, каскада следует избегать. Давайте воспользуемся примером.

.content p > a { color: red; }

Как вы думаете, как браузер отработает такое правило? Одной из главных вещей в CSS является то, что правила обрабатываются справа налево. Таким образом, сначала у нас будут выбраны все элементы a на странице. Затем из этого списка будут выбраны те элементы, которые находятся непосредственно внутри тега p. Далее, из этих всех элементов выбираются те, у которых есть родитель с классом .content. И, наконец, к полученным элементам будет применен указанный цвет текста.

Если вы беспокоитесь о производительности, то такой вариант будет куда быстрее:

.red { color: red }

Не используйте избыточные селекторы

Если в этом нет необходимости, не нужно быть избыточным. Потому что tag#id и tag.class отрабатывают дольше, чем #id и .class.

Помните об исключениях

Везде есть исключения. И если обычно CSS правила отрабатывают справа налево, то при использовании псевдо-селекторов все наоборот. Имеено поэтому div:nth-child(2) будет быстрее, чем :nth-child(2).

Ограничивайте CSS3

Большинство селекторов CSS3 сейчас работают медленно. Поэтому лучше использовать <div class="nth"> и селектор .nth, чем div:nth-child(2).

Указывайте правильный размер для изображений

Часто можно встретить, когда на сайте указана ссылка на изображение в высоком разрешение и это узображение масштабируется самим браузером. Это очень плохо. Процесс масштабирования требует достаточно много ресурсов. Поэтому всегда указывайте в свойствах width и height реальных размеры изображения.

Что касается Retina-экранов, то здесь можно использовать JavaScript, который будет подменять ссылки на изображения для этих счастливых пользователей, подгружая таким образом графику в нужном качестве, если, конечно, таковая вообще имеется. Ведь подавляющее большинство сайтов до сих пор не готово к Retina.

Используйте хаки

Например, в лекциях Яндекса я услышал об одном интересном приеме. Можно во время скроллинга отключать все события на странице. Ведь по сути, когда юзер скроллит страницу, ему не важно, изменится цвет какого-либо элемента при попадании курсора на него или нет. Но этот хак неплохо экономит ресурсы и ускоряет вашу страницу.