Оптимизация структуры веб-страниц

5.3. Пишем эффективный CSS

В книге "Разгони свой сайт" тема производительности CSS-селек-торов уже поднималась. Несмотря на то, что выводы были подкреплены значительным объемом исследований, основной вопрос — как же должна выглядеть эффективная таблица стилей, которая обеспечивает наискорейшее отображение документа на экране, — так и остался без ответа.

Для прояснения этой ситуации были проведены дополнительные исследования, базирующиеся на уже известных фактах: "наиболее эффективны селекторы, не использующие тегов", и "классы работают быстрее, чем идентификаторы".

Также известно, что селекторы обладают различной сложностью (например, селектор . class1 .class2, очевидно, должен отрабатывать медленнее, чем просто . class2).

5.3.1. Модель

Для уточнения существенных факторов и относительного ранжирования известных правил по написанию эффективного CSS-кода была взята за основу следующая формула:

Время отрисовки = Размер DOM-дерева * Число CSS-селекторов * Сложность стилевых правил * 
*Время отрисовки одного правила + Время создания документа

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

5.3.2. Уточнения по ходу

Также практически сразу становится ясно, что в формуле фигурирует не размер всего DOM-дерева, а число элементов, на которые влияет данный селектор (это, в частности, объясняет, почему универсальный селектор (*) такой ресурсоемкий). Для уточнения этого момента была проведена серия тестов с одинаковым DOM-деревом и различными CSS-правилами (одно применялось ко всему дереву, а другое — только к десятой его части).

Еще не стоит забывать о наличии у браузеров собственной таблицы стилей, которая применяется к каждой странице, выводящейся на экран. Размер этой таблицы можно выяснить достаточно просто: нужно всего лишь открыть две страницы с разным (и достаточно большим) числом CSS-правил, но одинаковым DOM-деревом и проверить, насколько замедлилась загрузка. Зная отношение размера двух таблиц стилей, можно вычислить неизвестный размер таблицы стилей самого браузера (для основных браузеров он составил в районе 30-50 правил, для IE — порядка 200).

И еще один момент, который всплыл по ходу расследования: имеет значение размер полного DOM-дерева, не только число тегов, но и число текстовых узлов, хотя это никак и не влияет на основные выводы.

5.3.3. Результаты

В ходе проведения различных тестов модель удалось уточнить и показать, что время создания документа зависит от числа узлов в дереве (что вполне очевидно). Это можно проверить двумя наборами тестов: на увеличении числа CSS-селекторов без увеличения DOM-дерева и на увеличении DOM-дерева без увеличения числа CSS-селекторов. При этом хорошо видно, что время создания документа не является постоянным и несколько увеличивается при увеличении размера документа.

Также было проверено, насколько составные селекторы отрабатывают медленнее своих элементарных собратьев (имеется в виду разница между . classl, . classl .class2 и . classl .class2 . class3). Разница была зафиксирована, но оказалась несущественной (каждое звено прибавляет примерно 10-20% к общей сложности селектора).

Итак, после всех уточнений, формула приобрела следующий вид:

T = (сумма(DOM1 * K) + DOM2 * In) * t + DOM2 * L

Здесь:

• T — время отображения документа на экране;
• DOM1 — число элементов, на которое может повлиять данное CSS-правило (разбор CSS-правил в браузерах идет справа налево);
• DOM2 — размер всего DOM-дерева;
• K — сложность каждого отдельного CSS-правила в таблице стилей, от 1 до 1,5;
• In — число встроенных CSS-правил в браузере, порядка 40-200;
• t — характерное время обработки одного правила для одного узла дерева, находится в районе 0,0001...0,0005 мс;
• L — характерные издержки на создание одного элемента DOM-дерева, находятся в районе 0,0005...0,005 мс.

Данная модель позволила аппроксимировать время отображения страницы с точностью 10% (в редких случаях 20%, — видимо, есть еще много неучтенных факторов, например, особенности выделения памяти различными браузерами). Тестирование проводилось на документах от 5000 DOM-узлов и от 0 CSS-правил.

5.3.4. Выводы

Анализ предложенной и проверенной модели позволяет сделать огромное количество весьма интересных выводов. Давайте остановимся на некоторых из них.

• Размер DOM-дерева играет основную роль. Просто наиглавнейшую. Поэтому совет на все времена: уменьшайте DOM всеми возможными способами. Уменьшение его (как хорошо видно из итоговой формулы) на 20% приведет к пропорциональному ускорению отображения страницы.
• Стоит также учесть, что в формуле фигурирует не только общий размер дерева, но и число элементов, которые обрабатываются при применении CSS-селектора. Именно по этой причине неэффективно использовать универсальный (*) селектор и теги: они охватывают существенное количество элементов.
• В качестве альтернативы применения общих тегов и универсальных селекторов можно назвать два выхода.
  1. Использовать уникальные теги для уникальных элементов на странице (например, для скругленных уголков использовать редкие теги — ins, del, q, u, b, i).
  2. Использовать уникальные классы для каждого набора стилевых правил.
  Если первый подход может быть применим для небольших сайтов (например, для уменьшения размера HTML-кода), то в случае средних и крупных проектов однозначно стоит применять второй подход (его, кстати, вовсю рекомендует и Виталий Харисов в своем своде правил для эффективного CSS и фреймворке Monkey Joe, http://clubs.ya.ru/yacf/).
• Использование сложных правил (с несколькими звеньями селекторов) может быть оправдано (это не влечет значительных издержек), однако если применять везде уникальные классы, то наследование обычно пропадает само собой.
• В качестве глобального сброса стилевых правил ("ластик") можно рекомендовать сбрасывать правила только у тех элементов, которые отображаются. Например, если на странице 90% DOM-дерева — это div, для которых не нужны никакие правила по умолчанию, то переход от глобального "ластика" к локальному или вообще его устранение за счет индивидуальных правил способно несколько увеличить производительность).
• Оптимизировать число CSS-правил стоит, если их больше 100-200 (ибо в противном случае правила самого браузера будут перекрывать все ваши усилия по увеличению эффективности).

Также стоит отметить, что по результатам тестирования Виталия Харисова (http://cLubs.ya.ru/yacf/repLies.xmL7item no=338) неиспользуемые CSS-правила добавляют некоторую задержку в отображении страницы (до 10% от времени отрисовки), поэтому их тоже стоит избегать.

Для средней HTML-страницы время ее отображения (размер DOM-дерева — 1000 элементов, CSS-правил — порядка 500, каждое из них в среднем применяется к 40% элементов) составит порядка 100 мс. Простой оптимизацией можно уменьшить этот показатель вдвое (например, сузив область воздействия самих селекторов, если DOM-дерево уменьшить не получается).