Сеансы оптимизации рендеринга и выбора братьев и сестер

У браузеров WebKit есть встроенная техника оптимизации для рендеринга стиля, что приводит к тому, что даже не нужно сопоставлять стиль примерно 60% элементов на вашей странице.

Тем не менее, эта оптимизация полностью отключена для всей страницы, если "какой-либо селектор сиблов встречается где угодно в таблице стилей... Это включает селектор и селектор +, такие как :first-child и :last-child."

Кто-нибудь знает полный список типов селекторов, которые отключили эту оптимизацию?

Дополнительная информация

Оптимизация обсуждается в исследовании Tali Garsiel по внутренним функциям браузера: Как работают браузеры.
Здесь приведена полная цитата из селекторов sibling из Dave Hyatt, которая, по-видимому, написала код браузера:" Не должно быть никаких селекторов-сиблистов, которые вообще не используются. WebCore просто бросает глобальный переключатель, когда встречается какой-либо селектор, и отключает общий доступ к стилю для всего документа, когда он присутствует. Это включает селектор + и селектора, такие как first-child и last-child.
Эта цитата, похоже, взята из статьи Hyatt, написанной в 2005 году. Ниже он более подробно обсуждается (тот же источник, что и предыдущий):

"WebCore (в будущих версиях Safari) имеет действительно что я придумал, чтобы избежать необходимости вычислять набор объявлений, которые применяются к элементу. Эта оптимизация на практике приводит к тому, что даже не нужно сопоставлять стиль примерно 60% элементов на вашей странице. Оптимизация заключается в том, чтобы распознавать, когда два элемента на странице будут иметь один и тот же стиль с помощью проверки DOM (и другого состояния) и просто по возможности делиться информацией о стиле интерфейса между этими двумя элементами."
Эта статья Нейта Кохели более подробно описывает алгоритм. Он суммирует это с:

"В веб-разработке часто существует 6 разных аналогичных способов сделать одно и то же. Что делает хорошего веб-разработчика постоянно выбирать наилучшие из почти неразличимых путей. Hyatt дает нам более полное представление о китах браузеров и поможет нам выбрать наилучшие методы".
Hyatt также обсудила оптимизацию в этом архиве списка рассылки W3C
Он также кратко появился в чате стека от Райана Кинала: "Ого, просто ничего себе, я больше никогда не буду использовать другой селектор".

Мне особенно интересно знать:

ли дочерние селекторы также отключают оптимизацию
использует ли Trident/IE любую подобную оптимизацию
существуют ли какие-либо тесты, показывающие, насколько большая разница в производительности рендеринга

Ответ 1

У меня нет полного списка, но этот текст из mozilla и Servo может быть полезен, я думаю.

Обработка обновлений стилей WebKit

Изменения атрибутов

Если элемент еще не имеет флаг recalc стиля, и если атрибутом является атрибут id или существуют селекторы, которые включают атрибут, элемент помечен для стиля recalc. Нет попытки дважды проверить, имеют ли эти селекторы какое-либо отношение к элементу и не пытаются обрабатывать случаи, связанные с "~" и "+" на этом этапе. Существует также отдельный крюк, называемый при изменении атрибутов класса, который, между прочим, безоговорочно помещает элемент как необходимый recalc стиля. Опять же, не предпринимаются попытки обрабатывать "~" и "+" . Ни в одном из этих случаев не существует попытки оптимизировать сопоставление выбора потомков.

Изменения состояния

Не существует единой настройки для изменений состояния в WebKit. Для каждого псевдокласса, который обрабатывается через логические состояния в Gecko, селекторное сопоставление имеет выделенную функцию, элемент, который он может вызывать для проверки соответствия этого псевдокласса. Изменения в этом состоянии внутри элемента отвечают за непосредственную маркировку этого элемента как необходимость в recalc стиля. Опять же, никакая попытка оптимизировать выбор селектора по потомкам или обрабатывать "+" или "~" не производится.. Здесь есть некоторые оптимизации, похожие на тот, который Gecko делает для :hover, которые охватывают :hover, :active, и что-то о перетаскивании.

Обработка вставок и удаление

В RenderStyle есть флаги, указывающие, зависят ли его дети от различных структурных псевдоклассов и комбинаторов "+" или "~" . При мутациях DOM первый затронутый элемент после изменения (в списке дочерних списков) помечен как необходимый recalc стиля или единственный первый дочерний элемент родителя, если ему может понадобиться recalc. Если для вещей больше, чем требуется изменение, потребуется recalc, тогда родитель будет отмечен как необходимый recalc стиля, который перескажет всех его детей. Во всех этих случаях, когда на самом деле перекомпонован стиль на элемент, проверяется, не пострадали ли его дети от "+" или "~" . Если это так, то, если какой-либо дочерний объект отмечен как нуждающийся в стиле recalc, либо дочерний элемент после него, либо все дочерние элементы после него (в зависимости от того, был ли задействован "+" или "~" ) также отмечены как необходимость в recalc стиля. Я думаю, здесь есть несколько ошибок вокруг цепочек из нескольких "+" .

Результат заключается в том, что в некоторых случаях WebKit заканчивает recomputing стиль на гораздо больше элементов, чем Gecko делает, насколько я могу судить, но в других он заканчивает recomputing стиль на многих меньших элементах. Например, учитывая селектор типа ".foo ~ span" и div, который изменяет класс с "foo" на "bar", Gecko будет пересобирать всех последующих братьев из div, в то время как WebKit вообще не будет работать, если нет "span" kids, так как он никогда не помешал бы родителям, так как в этом случае был затронут "+". Я не уверен, насколько это влияет на поведение вставки, где кажется, что два должны быть более похожими. Как-то WebKit, кажется, лучше, чем Gecko, в HTML5 сценариях с одной страницей, и я не могу понять, почему на этом этапе. Возможно, это просто потому, что его перекодировка по стилю кажется намного дешевле, чем Gecko для фактического запуска.

Другой результат заключается в том, что работа, связанная с индивидуальными изменениями атрибутов и состояний, намного меньше, чем в Gecko, за счет большей перекомпоновки стиля. Работа, связанная с вставкой/удалением DOM, примерно такая же.

источник

Ответ 2

Я не видел такой проблемы с селекторами, пока стиль селектора не будет иметь тяжелое изображение, требующее времени для загрузки.

Если css имеет встроенные веб-цвета, которые не должны сталкиваться с какой-либо проблемой с помощью каких-либо селекторов, в соответствии со спецификацией w3 на Selector..

Следующее правило аналогично приведенному в предыдущем примере, за исключением того, что оно добавляет селектор классов. Таким образом, специальное форматирование происходит только тогда, когда H1 имеет class= "открыватель":

h1.opener + h2 { margin-top: -5mm }

SO правила стандартизируются, но в браузере webkit должна быть некоторая ошибка, которая останавливается на ожидании конкретного селектора.