前端性能指标和优化目标——复合线程(compositor thread)与图层(layer)

复合是关键渲染路径中的最后一步，浏览器为了提高渲染的效率才有了复合，复合就是把页面拆解成不同的图层（类似Photoshop），当页面发生视觉变化时，可能只是影响了某一个图层其它图层不需要受到影响，此时我们可以把需要变化的元素单独创建一个图层。

复合线程主要做了以下几点：将页面拆分多个图层进行绘制再进行复合，默认情况下如何拆分图层是由浏览器决定的，浏览器会根据规则来判断是否将页面拆分成多个图层以及把哪些元素拆分成单独的图层，它主要分析元素相互之间的影响，如果某个元素对其它元素影响非常的多，那这个元素就会被单独抽出成图层，这样这个元素发生变化后就仅对它单独进行重绘；当然我们也可以主动将某个元素提取出图层，这样让它的变化更加独立些。

利用DevTools识别paint的瓶颈

以下样式仅影响到了复合

减少重绘的方法

对点击图片是否添加动画进行录制分析：
点击图片添加旋转（transform: rotate(360deg)）动画时：

点击录制功能录制点击过程中图片的旋转，我们点击图片之后图片开始选择起来，Main主线程就变得繁忙起来，放大后:

（Recalcute style）先计算样式，接着更新图形树（Update layer tree），组后就是复合（compiste layers），中间没有发生任何布局（layout）和重绘（paint）的步骤。

没有任何动画时Main主线程的状态，同时也没有Animation这一项

我们将旋转动画变成直接修改宽度（width）属性，会发生布局和重绘。
关键代码：

@keyframes rotate {
    0% {
        /* transform: rotate(0deg); */
        /* opacity: 0.1; */
        width: 300px;
        /*transform: scaleX(1);*/
    }
    100% {
        /* transform: rotate(360deg); */
        /* opacity: 0.1; */
        width: 600px;
        /*transform: scaleX(2);*/
    }
}

快捷键ctrl+shift+p，输入render

勾选上paint flashing之后，如果页面发生重绘，重绘的区域浏览器会绿色高亮，这就会非常方便观察页面是否发生重绘。

所以做动画的时候尽可能的用transform，并且将元素单独提取出来图层，利用will-change创建新的图层。

root: {
        margin: theme.spacing(1),
        willChange: 'transform'
    },

当我们用willChange: 'transform'创建新的图层时，也要考虑到创建的图层的数量。