@rogeryi
2016-11-22T15:04:43.000000Z
字数 986
阅读 2011
lighthouse
我们希望可以通过网页的合成图层树（Composted Layer）的复杂度和稳定性的数据来分析网页的渲染性能，帮助页端评估网页的合成图层树是否过于复杂或者变化过于频繁并且幅度过大，而导致网页的渲染性能不佳。
我们把合成图层树相关的数据分为两个类别，复杂度和稳定性。
复杂度包括树的深度，图层的数量，图层的面积等信息，过于复杂的图层树会导致树遍历/更新访问的时间更长，每一帧合成的耗时会更长，需要光栅化的面积更大，光栅化的耗时也更多。
稳定性包括图层树变化的频率和每次变化的幅度，比如新增或者内容发生变化的图层数量和需要重新光栅化的面积。一次大幅度的图层树更新很容易占据过多的CPU时间导致合成线程被阻塞，变化越频繁合成线程被阻塞的概率也越大。
图层复杂度的指标包括：
| 名称 | 说明 |
|---|---|
| 图层树深度（layer tree depth） | 图层树的层数，从根节点到最远的叶子节点的长度 |
| 图层数量（layer number） | 图层的数量，包括有内容的图层和没有内容的图层 |
| 图层面积（layer area） | 所有有内容的图层在最终合成时的像素面积总和，同时还包括图层面积和网页本身面积大小的比例 |
我们会跟踪在一段时间内生成的每棵图层树上述的值，最终输出的是平均值。
我们从图层树变化的幅度和变化的频率来评估图层的稳定性，一般来说变化频率高可能是正常的，比如Canvas/WebGL或者其它JS动画或者非加速的CSS动画都会导致内核不断生成新的 Main Frame，需要生成一颗新的图层树发送给合成器来取代当前的图层树。但是变化的幅度太大，甚至幅度即大，频率又高，这对性能的影响就比较明显了。
| 名称 | 说明 |
|---|---|
| 图层变化数量（layer changed number） | 更新图层树时，新生成的图层和内容发生变化的图层的数量 |
| 重新光栅化的面积 (re-rasterization area) | 更新图层树时，变化的图层导致需要重新光栅化的面积，同时还包括重新光栅化面积和可见区域面积的比例 |
| 图层的变化率（layer changed rate） | 在一秒内，每次更新图层树时变化的图层数量的累加总和 |
| 重新光栅化率（re-rasterization rate） | 在一秒内，每次更新图层树时需要重新光栅化的面积的累加总和 |
我们会跟踪在一段时间内生成的每棵图层树上述的值，最终输出的是平均值。