Chrome渲染层 - 创建条件？

Posted 2023-03-07

【中文标题】Chrome渲染层 - 创建条件？

【英文标题】：Chrome render layer - creation conditions?

【发布时间】：2015-06-02 08:07:55

【问题描述】：

我的网站上的动画速度很慢。 经过一番调查，我发现（通过 DevTools 时间线选项卡）问题在于整个页面正在重新绘制，而不仅仅是动画 div。

我检查了“显示复合层边框”选项，发现有时动画 div 位于另一个渲染层中。 但我找不到一致的行为：

当 div 不在另一层时 - 动画很慢。 当 div 在另一层时，动画有时快有时慢，这取决于页面中是否存在其他元素（带有position:fixed 的 div、marquee 等）。这些其他元素似乎与 DOM 树中的动画 div 完全无关，但显然对动画期间页面的呈现有影响。

我发现了几篇文章（1、2、3、4、5）提出了“强制”Chrome 在另一个渲染层中渲染元素的可能方法，但其中大部分是旧的（事情可能已经改变）。 此外，它们通常不会说明元素如何在渲染层方面相互影响。

Chrome 如何决定将哪个元素放入哪个层？ 我怎样才能知道我的案件的决定是什么？ （即调试渲染层） 关于渲染层，不同元素如何相互影响？ 另一层中的元素的动画如何导致整个页面的重新绘制？ （在某些情况下会发生这种情况） 如何确保快速渲染动画？即 - 强制元素进入另一层并确保动画不会导致整个页面的重新绘制。 最后 - 我如何才能及时了解浏览器渲染算法的变化，以便将来不再出现这些问题？

【问题讨论】：

问题太多了。

对于第一个问题，这个来自 Chromium 的文件非常清晰且不言自明。 chromium.googlesource.com/chromium/src.git/+/master/third_party/…

还有这个更好：chromium.googlesource.com/chromium/blink/+/…

【参考方案1】：

好的，所以我终于找到了解决问题的方法。

SO answer 解释了如何在 chrome DevTools 中启用“图层面板”。该面板可让您实时（甚至在动画期间）查看页面上哪些元素位于哪些图层中。 此外，每个图层都有一些属性，可以告诉您为什么 chrome 决定用它制作图层。 使用此工具，我能够确定我的一个元素是整个页面的叠加层（当有模态 div 时隐藏页面）有时会获得自己的图层，有时不会。 只有当页面上出现 marquee 等其他元素时才会获得图层的原因是 chrome 检测到“该元素可能与其他复合元素重叠”。 当这些“其他复合元素”不存在时，这个覆盖元素不会得到它自己的层。当我打开模式时，还有一个关于覆盖 div 不透明度的动画。而且由于它不在单独的图层中 - 它会导致整个页面在每一帧中重新绘制自身（这有时被称为“绘制风暴”）。 我通过在此 div 的样式中添加 -webkit-backface-visibility: hidden 来确保覆盖 div 始终拥有自己的层，从而解决了这个问题。