Реальный пиарСоздание сайтовВёрстка → Оптимизация CSS для ускорения обработки браузерами

Оптимизация 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.
Дополнительные материалы

Рекомендую ознакомиться с оригинальными статьями от Гугла и Мозиллы:
Optimize browser rendering (Google);
Writing Efficient CSS for use in the Mozilla UI (Mozilla).

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


Источник: http://vremenno.net

Рекомендуем



Кросс-браузерный @font-face Заходим, загружаем шрифт, получаем архив с примером использования и необходимыми типами файлов


Всегда используйте :hover вместе с :focus Если для :hover заданы простые правила, например, только изменение цвета текста, пренебрежение :focus не влечет за собой серьезных проблем


Красивые градиентные кнопки без картинок для всех браузеров Верхний бордер можно было сделать и с помощью inset box-shadow, но тогда кнопки не подходили бы под понятие graceful degradation