Эффективные и неэффективные селекторы CSS (согласно Google, PageSpeed…)

Пытаясь уменьшить размер HTML-страницы веб-страницы, я наткнулся на предложения Google и добавления PageSpeed ​​Firefox -Об эффективности селекторов CSS, которые (почти) заставили меня пересмотреть изменения:

http://code.google. com / intl / de-DE / speed / page-speed / docs / rendering.html # UseEfficientCSSSelectors

В частности, селекторы-потомки отлично подходят для выбора всего блока (например, DIV) с использованием атрибута ID или CLASS, а затем сохранения всех его дочерние элементы не содержат атрибутов CLASS / ID. Но если порядок обхода для применения правил такой, как описано в Google, их не следует использовать:

Селекторы потомков неэффективны, потому что для каждого элемента, соответствующего ключу, браузер также должен пройти вверх по дереву DOM, оценивая каждый элемент-предок, пока он не найдет совпадение или не достигнет корневого элемента. Чем менее конкретен ключ, тем большее количество узлов необходимо оценить.

Я очень сомневаюсь, что браузеры используют такой неэффективный порядок обхода, конечно, они будут обрабатывать только поддеревья элементов, которые соответствуют верхнему компоненту селектора, т.е. в #foo span {...} следует проверять только элементы ниже #foo, а не каждый отдельный диапазон. Может ли кто-нибудь, кто просмотрел недавний код браузера, подтвердить / опровергнуть это?

Второе сомнительное предложение касается чрезмерно квалифицированных селекторов:

Селекторы ID уникальны по определению. Включение квалификаторов тегов или классов просто добавляет избыточную информацию, которую нужно без нужды оценивать.

Если селекторы ID уникальны по определению, зачем браузерам проверять избыточную информацию? Я знаю это, потому что, например,

div # foo {color: black; }

Селекторы идентификаторов уникальны по определению. Включение квалификаторов тегов или классов просто добавляет избыточную информацию, которую нужно без нужды оценивать.

Если селекторы ID уникальны по определению, зачем браузерам проверять избыточную информацию? Я знаю это, потому что, например,

div # foo {color: black; }

Селекторы идентификаторов уникальны по определению. Включение квалификаторов тегов или классов просто добавляет избыточную информацию, которую нужно без нужды оценивать.

Если селекторы ID уникальны по определению, зачем браузерам проверять избыточную информацию? Я знаю это, потому что, например,

div # foo {color: black; } #foo {цвет: белый; }

приведет к черному тексту в

, но а) этого не следует делать (? Требуется ссылка на W3C) и б) Я не понимаю, почему это должно быть заметно медленнее, когда это приводит к простой проверке O (1) имени тега элемента.

Может ли кто-нибудь, хорошо знающий исходный код современных браузеров, пролить свет на эти утверждения? Поскольку большинство современных сайтов используют селекторы потомков (включая SO), и у них есть явные преимущества, я бы очень хотел их использовать ...

Изменить:

Я немного поэкспериментировал с сгенерированными страницами, и мне кажется, что обработка браузерами селекторов-потомков действительно жалкая:

Страница, состоящая из (сокращенно):

#top a {text-decoration: none;}

# foo1 a.foo {color: red;}

# foo2 a.foo {color: red;}

[... повторяется 10000 раз]

... [вложено 50 раз] bla

[ ...]

[предыдущая строка повторяется 10000 раз]

(в основном 10000 строк с 50 вложенными блоками div каждая для прохождения до корневого узла и 1 селектор, соответствующий из 10000)

загружает и отображает (время до окно .onload () выполняется) за 2,2 секунды с использованием Safari 5 и чуть менее 10 секунд с Firefox 3.6.10.

Когда селектор класса .foo удаляется из неприменимых правил, страница занимает около 200 секунд в Safari 5 и 96 секунд в Firefox 3.6.10. Это показывает, насколько плохо реализованы селекторы-потомки (в этом случае каждое из 10000 правил, вероятно, вызывает обход до #top, где правило не работает).

Как работают дочерние селекторы? #foo> span> div> div> div> div> div a {цвет: красный; } (также никогда не совпадает, но заставляет обход 6 родительских узлов) занимает 27 секунд в Safari 5 и 31 секунду в Firefox 3.6.10.

Заключение

Дочерний и дочерний селекторы в настоящее время плохо работают в основных браузерах. Все же лучше добавить уродливые атрибуты class / id во все стилизованные теги, если вы заботитесь о скорости, по крайней мере, для очень распространенных тегов HTML (таких как a, img, div и т. Д.).