由于内容不可压缩，因此在谷歌浏览器中添加了新的复合图层 [英] New composite layers in google chrome due to unsquashable content

问题描述

当chrome profiler说图层由于无法压扁而单独复合"时，这是什么意思?

What does it exactly mean when chrome profiler says "Layer was separately composited because it could not be squashed"

我正在更改html，并在相对div内引入了一个固定位置的div，并在其上给出了 will-change:transform .这样做之后，chrome产生了两个新的新图层作为副作用.我想了解导致chrome创建这些新复合层的原因以及导致chrome中此类新层发生的动作的确切原因.

I was making changes to my html and i introduced a fixed position div inside a relative div and gave will-change:transform on it. After doing that chrome created two more new layers as a side effect. I want to understand the exact reason as to what caused chrome to create these new composite layers and what action does trigger such kinds of new layers in chrome.

如果有帮助，请看下面的屏幕截图.

Here's a screenshot if that helps.

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

PS - i am running performance analysis on an angular app and found this thing.

推荐答案

有很多不同的原因导致无法执行挤压.我找不到太多有关它的信息，但查看C ++代码，有一个

There are a number of different reasons why squashing cannot be performed. I can't find much about it, but looking at the C++ code, there's a SquashingDisallowedReasons class with a reasons map, which may give you some insight into it. You could compare your DOM elements to the reasons.

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

来源: CompositingReasons 类

Chrome中的GPU加速合成提供了有关Blink中渲染的一些详细信息，但是从外观上看，这是一个非常复杂且涉及广泛的主题.我希望周围有更好的解释.

GPU Accelerated Compositing in Chrome provides some details about the rendering in Blink, but it's quite a complex and involved topic by the looks of it. I wish there were better explanations around.

这篇关于由于内容不可压缩，因此在谷歌浏览器中添加了新的复合图层的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！