- Размер DOM-дерева играет основную роль. Просто наиглавнейшую. Поэтому совет на все времена: уменьшайте DOM всеми возможными способами. Уменьшение его (как хорошо видно из итоговой формулы) на 20% приведет к пропорциональному ускорению отображения страницы.
- Стоит также учесть, что в формуле фигурирует не только общий размер дерева, но и число элементов, которые обрабатываются при применении CSS-селектора. Именно по этой причине будет неэффективным использовать универсальный (*) селектор и теги: они охватывают существенное количество элементов.
- В качестве альтернативы использования общих тегов и универсальных селекторов можно назвать два выхода:
- 1. Использовать уникальные теги для уникальных элементов на страницы (например, для скругленных уголков использовать редкие теги - ins, del, q, u, b, i).
- 2. Использовать уникальные классы для каждого набора стилевых правил.
Выводы. Пишем эффективный CSS. Оптимизация структуры веб-страниц
Уточнения по ходу
Результаты
Выводы
Анализ предложенной и проверенной модели позволяет сделать огромное количество весьма интересных выводов, давайте, остановимся на некоторых из них:
Использование сложных правил (с несколькими звеньями селекторов) может быть оправдано (это не влечет значительных издержек), однако если использовать везде уникальные классы, то наследование обычно пропадает само собой.
В качестве глобального сброса стилевых правил («ластик») можно рекомендовать сбрасывать правила только у тех элементов, которые отображаются. Например, если на странице 90% DOM-дерева - это div, для которых не нужны никаких правила по умолчанию, то переход от глобального «ластика» к локальному или вообще его устранение за счет индивидуальных правил способен несколько увеличить производительность).
Оптимизировать число CSS-правил стоит, если их больше 100-200 (ибо в противном случае правила самого браузера будут перекрывать все ваши усилия по увеличению эффективности).
Также стоит отметить, что по результатам тестирования Виталия Харисова (http://clubs.ya.ru/yacf/replies.xml?item_no=338) неиспользуемые CSS-правила добавляют некоторую задержку в отображении страницы (до 10% от времени отрисовки), поэтому их тоже стоит избегать.
Для средней HTML-страницы время ее отображения (размер DOM-дерева - 1000 элементов, CSS-правил - порядка 500, каждое из них в среднем применяется к 40% элементов) составит порядка 100мс. Простой оптимизацией можно уменьшить этот показатель вдвое (например, сузив область воздействия самих селекторов, если DOM-дерево уменьшить не получается).