Оптимизация CSS для ускорения обработки браузерами
Сегодня хочу поговорить о том, как браузеры обрабатывают правила CSS и как писать эти самые правила так, чтобы страница рендерилась быстрее.
Наверное, самый яркий пример тормозов, которые может вызвать CSS, это когда страница «дергается» при прокрутке в Ослике — это обычно связано с использованием :hover не у элементов <a>.
Итак, в связи с всеобщей тягой к ускорению веба, многие монстры интернета начали писать статьи и притворять в жизнь описываемые приемы. У Гугла есть статья про оптимизацию рендеринга в браузерах, у Мозиллы — про написание эффективного CSS. Я же хочу сделать «выжимку» из них ;-)
Как браузер обрабатывает стили
Ключевой момент — браузер читает правила справа налево. Мы же с вами пишем их слева на право. Чтобы почувствовать разницу, рассмотрим простой пример:
#global-wrapper ul.companies li a span { ... }Браузер делаем следующее: сначала он находит все элементы <span>, затем берет те из них, что содержатся внутри <a>, потом внутри <li> и так далее. Соответственно, процесс обработки такого правила довольно долгий.
Основные типы селекторов и их эффективность
Существует четыре основных типа селекторов, на которых основаны все остальные. Ниже они представлены в порядке уменьшения их эффективности с точки зрения скорости обработки:
#global-wrapper { ... } /* по id элемента — самый эффективный */
.partners { ... } /* по классу */
ul { ... } /* по тегу */
*, [rel=external] { ... } /* универсальный — самый медленный */Как видите, любые другие правила можно составить на основе этих четырех. Принимая во внимание способ обработки стилей браузером и эффективность основных типов легко понять принцип ускорения.
Советы по написанию селекторов
Избегайте универсальных селекторов
Делайте так, чтобы элементы наследовали стили от родителей или используйте классы для применения стилей к разным элементам.
Избегайте лишних селекторов
Не используйте без нужды теги при селекторе по id или классу:
div#global-wrapper { ... } /* Плохо */
#global-wrapper { ... } /* Хорошо */
... li.categories { ... } /* Плохо */
.categories { ... } /* Хорошо */Излишняя вложенность селекторов так же нежелательна:
#company-profile ul li { ... } /* Плохо (ul лишний, так как li может содержаться только внутри ul) */
#company-profile li { ... } /* Хорошо */
Используйте class и id — самые быстрые селекторы
По возможности старайтесь использовать в ваших правилах селекторы по id или классам — они самые эффективные.
Используйте :hover только для ссылок в IE7 и IE8
Если вам нужно указать поведение элемента при наведении, используйте JavaScript.
Не используйте expression
Экспрешены работают только в IE 5-7, но при этом замедляют рендеринг страниц. Вместо них можно использовать JavaScript.
Рекомендуем почитать
