Xiper

Эффективность CSS селекторов

Автор: Евгений Рыжков Дата публикации:

CSS имеет разные типы селекторов, которые по разному влияют на скорость отрисовки веб страниц. Для разработки высокопроизводительных проектов пригодиться понимание разницы применения селекторов.

Перед тем как перейти к сравнению эффективности селекторов стоит обратить внимание на то как браузеры «читают» CSS правила. А «читают» они эти правила справа налево:

#headerWrap address div

Сначала браузер найдет на странице все элементы <div>. Затем все <div>, которые вложены в <address>. Затем все <div>, которые вложены в <address>, которые вложены в #headerWrap. Получается достаточно сложная и медленная обработка. Поэтому главным ключом к повышению производительности CSS являются простые правила с четко указанными селекторами.

Рейтинг эффективности CSS селекторов

  1. селектор идентификатора (#id) — самый быстрый;
  2. селектор класса (.class) — практически такой же быстрый как и селектор идентификатора;
  3. селектор тега (p, div и т.п.);
  4. селектор сестринского элемента (li+li, .class+div и т.п.);
  5. селектор дочернего элемента (ul>li, .class>div и т.п.);
  6. селектор потомка (ul li, .class div и т.п.);
  7. универсальный селектор (*);
  8. селектор атрибута (a[target="_blank"] и т.п.);
  9. селектор псевдоклассов и псевдоэлементов (a:hover, li:first-child и т.п.);

Рекомендации

Забываем про универсальный селектор.

Не используем селекторы тегов вместе с id или классом:

div.menu {...} /* плохо */
.menu {...} /* хорошо */
div#header {...} /* плохо */
#header {...} /* хорошо */

Не используем селекторы класса или тегов вместе с идентификаторами:

.menu#firstItem {...} /* плохо */
li#firstItem {...} /* плохо */
#firstItem {...} /* хорошо */

Избегаем лишних селекторов:

#headerWrap address div {...} /* плохо */
#headerWrap div {...} /* лучше, но все равно не очень */

Стараемся чтобы в CSS не было каскада и селекторов тегов:

ul li a {...} /* плохо */
.linkMenu {...} /* хорошо */

P.S.

Эти рекомендации ощутимого прироста производительности не дадут для небольших проектов. Они предназначаются в первую очередь для огромных, высоконагруженных проектов или же динамических веб приложений, где часто перерисовываются страницы.

Материалы

  • Writing Efficient CSS for use in the Mozilla UI
  • Optimize browser rendering
  • CSS Selectors: Should You Optimize Them To Perform Better?
  • Проблема: скорость селекторов