性能优化-合成层

1. 提升移动或渐变元素的绘制层

绘制并非总是在内存中的单层画面里完成的。实际上，浏览器在必要时将会把一帧画面绘制成多层画面，
然后将这若干层画面合并成一张图片显示到屏幕上。通过渲染层提升可以减小绘制区域，我们可以用调试工具查看到绘制层：

在页面中新建一个渲染层最好的方式就是使用 will-change 属性，同时再与 transform 属性一起使用，就会创建一个新的组合层：

.element {
　　will-change: transform;
}

对于那些目前还不支持 will-change 属性、但支持创建渲染层的浏览器，可以使用一个 3D transform
属性来强制浏览器创建一个新的渲染层：

.element {
　　transform: translateZ(0);
}

注意: 别盲目创建渲染层，一定要分析其实际性能表现。因为创建渲染层是有代价的，每创建一个新的渲染层，
就意味着新的内存分配和更复杂的层的管理。并且在移动端 GPU 和 CPU 的带宽有限制，
创建的渲染层过多时，合成也会消耗跟多的时间。

2. 元素提升为合成层后，transform 和 opacity 才不会触发 paint，如果不是合成层，则其依然会触发 paint

在 Blink 和 WebKit 内核的浏览器中，对于应用了 transition 或者 animation的 opacity 元素，浏览器会将渲染层提升为合成层。

也可以使用 translateZ(0) 或者 translate3d(0,0,0) 来人为地强制性地创建一个合成层。

转载于:https://www.cnblogs.com/mengff/p/8335111.html