渲染优化与同胞选择器

Question

WebKit浏览器有一种内置的风格呈现优化技术，“它甚至不需要匹配页面上大约60%的元素的样式。”

但是，如果“在样式表中的任何地方遇到任何同级选择器.这包括+选择器和选择器(如:first-child和:last-child)”，则整个页面的优化将完全关闭。

有人知道禁用此优化的选择器类型的完整列表吗？

--

更多信息

• 在Tali Garsiel关于浏览器内部：浏览器的工作方式的研究中讨论了优化问题。
• 以下是来自戴夫·凯亚特的同级选择器的完整引语，显然他编写了浏览器代码：“绝对不能使用兄弟选择器。当遇到任何兄弟选择器时，WebCore只是抛出一个全局开关，并在整个文档出现时禁用样式共享。这包括+选择器和选择器，比如:first-child和:last。”
• 这句话似乎来自凯悦在2005年写的一篇文章。下面，他更详细地讨论了这个问题(与以前的来源相同)：

"WebCore (在即将发布的Safari版本中)有一个非常酷的优化，为了避免计算适用于元素的声明集，我提出了一个非常酷的优化。这种优化实际上甚至不必匹配页面上大约60%的元素的样式。优化的思想是通过DOM (和其他状态)检查来识别页面中的两个元素何时具有相同的样式，并尽可能地在这两个元素之间共享前端样式信息。“

• 此文章作者: Nate Koechley将更详细地讨论该算法。他总结说：

“在网络开发中，通常有6种不同的类似方式来做同样的事情。一个优秀的web开发者不断地从几乎无法区分的路径中选择最好的方式。凯悦的这些内幕消息让我们更全面地了解浏览器的精髓，并将帮助我们选择最好的方法。”

• Hyatt还讨论了该W3C邮件列表存档的优化问题。
• 它还在Ryan的堆栈聊天中简短地提到：“哇，哇，我再也不会使用其他的兄弟姐妹选择器了。”

我特别想知道：

• 子选择器是否也关闭优化
• 三叉戟/IE是否使用类似的优化
• 是否存在显示它对呈现性能有多大影响的测试？

Answer 1

我没有完整的列表，但我认为这篇来自mozilla和Servo的文章会有所帮助。

WebKit处理样式更新的

属性变化

如果元素还没有标记样式recalc，如果该属性是id属性，或者存在涉及该属性的选择器，则该元素将被标记为样式recalc。没有试图重复检查这些选择器是否与元素有任何关系，也没有试图在此阶段处理涉及“~”和“+”的情况。还有一个单独的钩子，名为“类属性更改时”，除其他外，它无条件地将元素标记为需要样式recalc。同样，没有尝试处理'~‘和'+’。在所有这些情况下，都没有尝试优化后代的选择器匹配。

状态变化

WebKit中的状态更改没有统一的设置。对于通过Gecko中的布尔状态处理的每个伪类，选择器匹配都有一个专门的函数--它可以调用这个元素来测试这个伪类是否匹配。元素中对该状态的更改负责直接将该元素标记为需要重新计算样式。同样，没有尝试优化后代上的选择器匹配，也没有处理'+‘或'**~**’。这里有一些类似于壁虎为:hover所做的优化，涵盖:hover、:active,和一些关于拖动的内容。

插入和删除的处理

RenderStyle有标志，表示其子类是否受到各种结构伪类和“+”或“~”组合子的影响。在DOM突变中，更改后的第一个受影响元素(以子列表顺序排列)被标记为需要样式recalc，或者如果父元素可能需要recalc，则标记为父元素的单个第一个子元素。如果更改之前的更多内容可能需要一个recalc，那么父元素被标记为需要一个样式recalc，它将重新计算它的所有子节点。在所有这些情况下，当实际对元素重新计算样式时，会检查其子元素是否受“+”或“~”的影响。如果是这样的话，那么如果有一个子节点被标记为需要重新计算样式，那么它之后的所有子节点(取决于是否涉及“+”或“~”)也被标记为需要重新计算样式。我认为，在多个'+‘链的周围有一些bug。

结果是，据我所知，在某些情况下，WebKit在比壁虎更多的元素上获得了重新计算风格，但在其他情况下，它最终在更少的元素上实现了重新计算风格。例如，给定像".foo ~ span“这样的选择器和将类从"foo”更改为"bar“的div，壁虎将重新调整div的所有后续兄弟姐妹的样式，而如果没有"span”子类，WebKit将根本不做任何工作，因为在这种情况下，它不会将父类标记为受'+‘的影响。我不确定这会在多大程度上影响插入行为，而这两者似乎应该更相似。不知怎么的，WebKit在HTML5单页规范脚本上似乎比壁虎做得更好，我现在还不知道为什么。也许这仅仅是因为它的风格再造看起来比壁虎的要便宜得多。

另一个结果是，涉及到个人属性和状态变化的工作要比壁虎少得多，而代价是更多的风格重构。DOM插入/删除所涉及的工作大致相同。

来源

Answer 2

我从未见过选择器有任何这样的问题，直到选择器样式与沉重的图像一起加载，这需要时间。

如果css具有内置的网页颜色，根据w3关于选择器的规范，任何类型的选择器都不应面临任何问题。

以下规则与前面示例中的规则相似，只不过它添加了一个类选择器。因此，只有当H1具有class=“打开器”时才会发生特殊的格式设置：

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

因此，规则是标准化的，但在webkit浏览器中一定有一些错误，它会停止等待特定的选择器。