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的不透明度的动画。而且由于它不在一个单独的层中 - 它导致整个页面在每个帧中重新绘制自己（这有时被称为“油漆风暴”）。
• 通过将-webkit-backface-visibility: hidden添加到此div的样式，确保overlay div始终获得自己的图层，我解决了这个问题。