html - 由于不可压缩的内容，谷歌浏览器中的新复合层

Question

当 chrome profiler 说“Layer was separately composed because it couldn't be squashed”到底是什么意思

我正在对我的 html 进行更改，我在相对 div 中引入了一个固定位置的 div，并在其上提供了 will-change:transform。这样做之后，chrome 又创建了两个新层作为副作用。我想了解导致 chrome 创建这些新复合层的确切原因，以及什么操作会触发 chrome 中的此类新层。

如果有帮助，请提供屏幕截图。

PS - 我在一个角度应用程序上运行性能分析并发现了这个东西。

Answer 1

压缩无法执行的原因有很多。我找不到太多关于它的信息，但是查看 C++ 代码，有一个 SquashingDisallowedReasons用原因图上课，这可能会让你对它有一些了解。您可以将 DOM 元素与原因进行比较。

 { CompositingReasonOverlap,
        "overlap",
        "Overlaps other composited content" },
 { CompositingReasonSquashingDisallowed,
        "squashingDisallowed",
        "Layer was separately composited because it could not be squashed." }

来源: CompositingReasons类

GPU Accelerated Compositing in Chrome提供了有关 Blink 渲染的一些细节，但从外观上看，它是一个相当复杂和涉及的主题。我希望周围有更好的解释。