Как браузер ищет CSS селекторы?
Селекторы и специфичность
Браузер сопоставляет селекторы с элементами справа налево: сначала находит элементы по последней части селектора, потом проверяет предков.
Пример
.menu li a { color: red; }- Берутся все элементы
a. - Для каждого проверяется, есть ли выше
li. - Затем — есть ли выше
.menu.
Так быстрее отбросить неподходящие элементы: большинство элементов страницы не являются a, и дальнейшая проверка не нужна.
Оптимизации браузера
- правила раскладываются по корзинам по id, классу и тегу последней части — проверяются только подходящие;
- Bloom-фильтр по предкам быстро отсекает заведомо неподходящие цепочки;
- результат кешируется и пересчитывается только для изменившихся частей DOM.
Что из этого следует
- Короткие селекторы по классам (
.nav__link) сопоставляются быстрее, чем глубокие цепочки. - Универсальный селектор или тег в конце (
.menu *) заставляет проверять много элементов. - Обычно это заметно только на очень больших DOM.
Коротко для собеседования
Селекторы проверяются справа налево: от самого элемента к предкам; короткие селекторы по классам — быстрые и предсказуемые.
Подробнее: web.dev — Reduce the scope and complexity of style calculations