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

Автор: Мациевский Николай aka sunnybear

Опубликована: 27 августа 2009

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

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

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

Модель

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

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

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

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

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

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

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

Результаты

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

Также была проверена гипотеза, насколько составные селекторы отрабатывают медленнее своих элементарных собратьев (имеется в виду разница между .class1, .class1 .class2 и .class1 .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-правил.

Выводы

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

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

Также стоит отметить, что по результатам тестирования Виталия Харисова неиспользуемые CSS-правила добавляют некоторую задержку в отображении страницы (до 10% от времени отрисовки), поэтому их тоже стоит избегать.

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