Войти с помощью github
Форум /

Браузеры рассматривают селекторы cправа налево. Например, при нахождении элемента <a> в дереве документа будут выбраны все селекторы с a или * на конце и будет осуществлён просмотр вверх по дереву в поисках элементов входящих в селектор до тех пор пока не будут найдены подходящие элементы, не станет понятно, что селектор не применим или не будет достигнут конец документа.

Т.е. в случае селекторов .b-services li a и .b-user a (Tag Rules) оба они будут испробованы для каждой ссылки на странице.

Источники, подтверждающие это:

  1. Writing Efficient CSS for use in the Mozilla UI
  2. Faster HTML and CSS: Layout Engine Internals for Web Developers


Наглядный пример: 30 тысяч div'ов на странице, селекторы заканчиваются на .text (рефлоу 5 секунд) и на div (рефлоу 37 секунд, осторожно! браузер замерзает, а потом оттаивает).

Чем больше Tag Rules на странице, тем медленнее страница отрисовывается. Для того, чтобы вёрстка была масштабируемой, чтобы на одних и тех же подходах можно было сделать и «Home Page для кота» и почту Яндекса надо найти универсальное решение, которое подходит на все случаи жизни.

Такое решение, на мой взгляд, это использование абсолютно-независимых блоков для вёрстки всех-всех блоков на странице и отказ от global reset. В этом случае каждый элемент блока получает свой уникальный класс и селекторы отрабатывают максимально быстро.

Открытым вопросом пока остаётся влияют ли на скорость применения селекторов наличие селекторов которые ничего не матчат, надо написать тесты.




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