css - 渲染优化和兄弟选择器

Question

WebKit 浏览器有一个内置的样式渲染优化技术，“这使得页面上大约 60% 的元素甚至不必匹配样式。”

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

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

--

更多信息

• 优化在 Tali Garsiel 的浏览器内部研究中进行了讨论:How Browsers Work .

• 这是来自 Dave Hyatt 的兄弟选择器的完整引用，显然是浏览器代码的作者:“根本不能使用同级选择器。WebCore 在遇到任何同级选择器时简单地抛出一个全局开关，并在它们出现时禁用整个文档的样式共享。这包括 + 选择器以及像 :first-child 和 :last-child 这样的选择器。”

• 这句话似乎来自 Hyatt 在 2005 年写的一篇文章。下面他更详细地讨论了它(与之前的来源相同):
  
  “WebCore(在即将推出的 Safari 中releases) 有一个非常酷的优化，我想出了这个优化来避免计算应用于元素的声明集。这种优化在实践中导致甚至不必为页面上大约 60% 的元素匹配样式. 优化背后的想法是通过 DOM(和其他状态)检查识别页面中的两个元素何时将具有相同的样式，并尽可能简单地在这两个元素之间共享前端样式信息。”

• 这article by Nate Koechley更详细地讨论了该算法。他总结道:
  
  “在 Web 开发中，通常有 6 种不同的相似方法来完成同一件事。优秀的 Web 开发人员不断选择几乎无法区分的最佳路径. Hyatt 的这些内幕提示让我们更全面地了解浏览器的内部结构，并将帮助我们选择最佳方法。”

• Hyatt 也在这个 W3C mailing list archive 中讨论了优化

• 它也在 Stack chat 中短暂出现来自 Ryan Kinal:“哇。哇。我再也不会使用其他同级选择器了。”

我特别想知道:

• 子选择器是否也关闭优化

• Trident/IE 是否使用任何类似的优化

• 是否有任何测试表明它对渲染性能有多大影响

Answer 1

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

WebKit 对样式更新的处理

属性变化

如果元素还没有标记样式重新计算，并且如果属性是 id 属性或者有涉及该属性的选择器，则标记元素以进行样式重新计算。没有尝试仔细检查这些选择器是否与元素有任何关系，也没有尝试在这个阶段处理涉及 '~' 和 '+' 的情况。还有一个单独的钩子(Hook)，当类属性发生变化时调用，除其他外无条件地将元素标记为需要样式重新计算。同样，不会尝试处理“~”和“+”。 在这些情况下都没有尝试优化后代的离开选择器匹配。

状态变化

WebKit 中没有针对状态更改的统一设置。对于在 Gecko 中通过 bool 状态处理的每个伪类，选择器匹配都有一个专用函数，它可以调用该元素来测试该伪类是否匹配。对元素内部状态的更改负责直接将该元素标记为需要样式重新计算。 同样，没有尝试优化后代的远离选择器匹配或处理“+”或“~”。这里有一些优化类似于 Gecko 为 :hover 制作的涵盖 :hover、:active、 和一些关于拖动的内容。

插入和删除的处理

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

结果是，在某些情况下，WebKit 在比 Gecko 所做的更多的元素上重新计算样式，据我所知，但在其他情况下，它最终在更少的元素上重新计算样式。例如，给定一个像“.foo ~ span”这样的选择器和一个将类从“foo”更改为“bar”的 div，Gecko 将重新设置 div 的所有后续兄弟的样式，而 WebKit 不会这样做如果没有“跨度” child ，则根本没有任何工作，因为在这种情况下，它永远不会将 parent 标记为受到“+”的影响。我不确定这会在多大程度上影响插入行为，看起来两者应该更相似。 不知何故 在 HTML5 单页规范脚本上，WebKit 似乎比 Gecko 做得更好，我现在不明白为什么。也许这仅仅是因为它的样式重新计算似乎比 Gecko 的实际运行成本低得多。

另一个结果是，与 Gecko 相比，单个属性和状态更改所涉及的工作要少得多，代价是需要更多的样式重新计算。 DOM插入/删除所涉及的工作大致相同。

source