html - Chrome 渲染层 - 创建条件？

Question

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

我勾选了“Show composited layer borders”选项，发现有时动画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 的不透明度的动画。由于它不在单独的层中 - 它导致整个页面在每一帧中重新绘制自身(这有时被称为“绘制 Storm ”)。
• 我通过添加 -webkit-backface-visibility: hidden 确保覆盖 div 始终有自己的层解决了这个问题。到这个 div 的样式。