[译]渲染性能优化之Composite篇

Compositing指的是将页面上全部的painted部分放在一起在屏幕上展示。这个区域有两个很关键的影响页面性能的因素：1.compositor layer的数量需要被管理。2.用于动画的属性也是。

性能最好的pixel pipeline版本就是避免layout和paint的版本，仅仅触发compositing改变：

为了达到这个目的，你需要坚持使用只单独触发compositor改变的属性。目前只有两个属性可以做到：transform和opacity。

元素的transform和opacity仅仅会改变自己的compositor layer。为了新建一个layer，你必须提升一个layer，接下来我们会讲到。

正如我们在[译]渲染性能优化之Paint篇一节中提到的，你应该把你计划动画的元素(在合理的范围内，不要过度!)提升到它们自己的层:

.moving-element {
    will-change: 
}

不支持will-change的浏览器可以用：

.moving-element {
  transform: translateZ(0);
}

这将向浏览器发出更改即将到来的警告，根据您计划更改的内容，浏览器可能会做出一些规定，比如创建compositor层。

这可能是诱人的，然后，知道层往往有助于性能，促进所有元素在您的页面上与以下内容类似:

* {
  will-change: transform;
  transform: translateZ(0);
}

这是一种迂回的方式，表示您希望提升页面上的每个元素。这里的问题是，您创建的每一层都需要内存和管理，而这并不是免费的。事实上，在内存有限的设备上，创建层对性能的影响可能远远超过它带来的好处。每一层的纹理都需要上传到GPU上，所以CPU和GPU之间的带宽以及GPU上纹理的可用内存都有进一步的限制。

警告：不要提升没有必要提升的元素。

为了更好地理解layer和composite这个过程，可以使用Chrome DevTools的Layer面板，然后勾选Paints。可以上下移动layer：可以看到完整的layer，不仅仅是当前viewport。

可以旋转layer：旋转可以看到Compositing的多个layer的层级结构。

在左侧可以看到layers列表，单击每一个可以获得详情。详情内容可用于分析页面性能。	属性	值
Size	960x152(at 0,0)
Compositing Reasons	Is fixed or sticky position.Might overlap other composited content.
Memory estimate	570KB
Paint count	6
slow scroll regions
Sticky position constraint

在Compositing Reasons中可以看到非常细粒度的layer描述，比如当前页面的Header。 Is fixed or sticky position.Might overlap other composited content.

layer唯一有一点很不好：那就是开启后进行分析的时候很卡。（mbp2019款 15寸官方顶配的体感）

FrankKai / FrankKai.github.io