Пишу про разработку вообще и в частности про: JavaScript, HTML5, CSS3, AngularJS, ReactJS, Agile, Bitcoins

Скорость выборки css селекторов

Разные селекторы по-разному обрабатываются браузером (капитан очевидность). Как следствие одни работают быстрее чем другие. Имеет смысл внимательно подходить к работе с селекторами с самого начала, потому что когда уже нужно решать проблему с перформансом написано столько кода, что мама не горюй.

Разные селекторы по скорости работы. Чем ниже, тем хуже.

  1. ID, например #header
  2. Класс, например .promo
  3. Тип, например div
  4. Выбрать относительно соседей, например h2 + p
  5. Прямое родство, например li > ul
  6. Вложенность, например ul a
  7. Универсальный, например *
  8. Атрибут, например [type="text"]
  9. Псевдо классы, например a:hover

Ссылки по теме:
Writing efficient CSS selectors

Поделиться:
comments powered by Disqus