Chrome渲染层-创建条件？

Question

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

我检查了 "Show composited layer borders" 选项，发现有时动画 div 在另一个渲染层中。
但我找不到一致的行为：

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

我找到了几篇文章 (1, 2, 3, 4, 5)，它们提出了 "force" Chrome 在另一个渲染层中渲染元素的可能方法，但其中大部分都是旧的（可能有改变了）。
此外，它们通常不会解决元素如何在渲染层方面相互影响。

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

Answer 1

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

• 此 SO answer 解释了如何在 chrome DevTools 中启用 "Layers panel"。该面板允许您实时（甚至在动画期间）查看页面上的哪些层中的哪些元素。
  此外，每一层都有属性告诉您为什么 chrome 决定用它做一个层。
• 使用这个工具，我能够确定我的元素之一是整个页面的覆盖层（当有模态 div 时屏蔽页面）有时有自己的层，有时没有。
• 它只有在页面上出现 marquee 等其他元素时才获得图层的原因是 chrome 检测到 "the element may overlap other composited elements".
  当这些 "other composited elements" 不存在时，此叠加元素不会获得自己的图层。当我打开模式时，还有一个关于叠加层不透明度的动画 div。由于它不在单独的层中 - 它导致整个页面在每一帧中重新绘制自身（这有时称为 "paint storm"）。
• 我通过将 -webkit-backface-visibility: hidden 添加到此 div.
的样式来确保叠加层 div 始终拥有自己的图层来解决问题