• блог
• вопросы и ответы
• рецензии
• реклама на сайте
• RSS каналы
  3355 подписчиков
• наш твиттер
  426 фолловеров

Оптимизация CSS для ускорения обработки браузерами

28 мая 2010, 8:00 Павел Марковнин HTML и CSS рейтинг 26

Всем привет.

Сегодня хочу поговорить о том, как браузеры обрабатывают правила 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.

Дополнительные материалы

Рекомендую ознакомиться с оригинальными статьями от Гугла и Мозиллы:

• Optimize browser rendering (Google);
• Writing Efficient CSS for use in the Mozilla UI (Mozilla).

Еще есть небольшая заметка от Яндекса по поводу верстки новой страницы результатов поиска. Метод основан на указанных выше статьях.

Автор статьи: Павел Марковнин

Понаписал еще 106 статей.

Понравилась статья?

Тогда подпишись на обновления через RSS или воспользуйся
другими способами подписки.

• Адрес электронной почты
•