Chrome渲染层 - 创建条件？

Question

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

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

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

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

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

Answer 1

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

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