4 合成器动画性能分析和优化指南
4.1 动画流水线
上图显示了合成器动画的渲染流水线示意图，根据 Android WebView 平台的实现进行绘制，其它平台可能略微不同，但对后面的性能分析，在大部分情况下影响不大
整个流水线的大概过程是：
- 位于 Browser 进程 UI 线程的窗口管理器接收到来自操作系统的屏幕刷新垂直同步信号（VSync），开始准备输出新的一帧，它首先给位于 Renderer 进程 Compositor 线程的 Layer Compositor 发送一个 Begin Frame 消息；
- Layer Compositor 接收到 Begin Frame 消息后，更新合成器内部的状态机，开始准备输出 Compositor Frame，在这个过程中的一个重要动作就是 Animate，合成器会检查当前是否有正在运行的动画，然后运行这些动画，并根据动画运行的结果改变关联图层的对应属性（比如惯性滚动动画改变图层的 Scroll Offset，Transform 动画改变图层的 Transform），Animate 的结果会发送回给 UI 线程告诉其是否有动画正在运行，需要更新窗口；
- 如果 UI 线程确定合成器需要更新窗口，则会发送一个 Draw 消息请求合成器输出下一帧 Compositor Frame；
- 合成器按下面的过程产生新的 Compositor Frame 并发送给 Display Compositor； 4.1 合成器找出在当前可见区域内显示的图层； 4.2 合成器找出这些图层在可见区域内的分块； 4.3 如果该分块已经有分配 Resource（说明此分块已经完成光栅化），则产生一个 Draw Quad 的命令置入 Compositor Frame 中，如果没有则跳过；
- Display Compositor 接受到新的 Compositor Frame 后，对 Compositor Frame 进行 Render，将每一个 Draw Quad 命令转换成一个 GL Draw Call，然后 GPU 执行所有的 GL 指令完成最后的窗口绘制；
上述流程的一些关键点是：
- Draw 的过程中，合成器不会等待可见的分块光栅化完成，这让合成器充分利用了异步光栅化的机制来提升性能，但是也会造成动画过程中可能会出现空白的分块，比如快速滚动页面有时会看到空白区域；
- 在合成器动画过程中，Layer Compositor 和 Display Compositor 是异步并发的，在 Display Compositor 输出 GL Frame N 的时候，Layer Compositor 已经可以开始输出下一帧 Compositor Frame N + 1；
4.2 动画耗时分析
- Begin Frame 的耗时一般很短，大概 1 ～ 2 毫秒左右；
- Draw 的耗时也不长，一般不超过 5 毫秒，耗时主要取决于网页的图层复杂度，总的来说合成器动画过程中 Compositor 线程的开销一般都不会构成性能瓶颈；
- Render 的耗时也不长，一般也是不超过 5 毫秒，耗时主要取决于当前可见区域内的可见分块的数量；
- GPU 部分的耗时比较长，耗时主要取决于当前可见区域内的可见分块的总面积，也就是绘制的总面积，一旦 Render + GPU 部分的耗时大于 16.7 毫秒，动画就会出现掉帧；
总的来说影响合成器动画性能的最关键因素就是过度绘制系数（Overdraw，可以理解为绘制的面积和可见区域面积的比例），如果网页本身存在大量图层堆叠情况，导致过度绘制系数过高，就会严重影响合成器动画的性能。经验显示，过度绘制系数比较理想的值是在 2 以内，一般建议不超过 3，这样可以保证在中低端的移动设备上也有不错的性能表现。
另外，合成器动画过程中，Compositor 和 GPU 线程是前台线程，它们虽然理论上不会被 Worker 和 Renderer 线程阻塞，但是在真实的运行场景中，移动设备的 CPU/GPU 和内存带宽等硬件资源是有限的，如果 Worker 和 Renderer 线程处于高负荷状态下，也会导致前台的 Compositor 和 GPU 线程阻塞，最终导致合成器动画掉帧。
这种现象常见于：
- 网页在合成器动画比如惯性滚动过程中，有大量的 JS 加载图片或者其它内容，并频繁地对 DOM 树进行操作；
- 网页的图层树非常复杂，并且其结构在合成器动画过程中频繁发生变化，导致大量的光栅化任务在 Worker 线程运行；
4.3 动画性能优化 Checklist
根据上述的耗时分析，我们可以给出一个页端优化合成器动画性能的简单 Checklist：
- 检查网页的图层结构是否合理，包括深度和数量，一般来说深度在 10 以内，数量在 100 以内是比较合理的值；
- 检查网页的合成器动画，包括网页的惯性滚动，各种图层的淡入/淡出等动画，在动画过程中，是否同时存在大量的网络加载和 DOM 操作，网页图层结构是否保持稳定；
- 当网页处于任一滚动位置上时，它的当前过度绘制系数是否合理；
如何判断网页的图层结构是否稳定，一般而言，如果是位于叶子节点的图层增加或者移除，对整个图层结构影响并不大，但是如果是中间节点的图层增加或者移除，对图层结构的影响就比较大了，并且越是接近根节点，影响就越大。
现在的页端都会大量使用异步加载来优化加载性能和流量，但是容易出现导致动画掉帧的现象。要平衡好这一点意味着需要实现一个加载和关联 DOM 操作的调度器，如果检查到动画正在运行，则停止加载或者通过节流阀机制降低加载的并发数量和频率，同时可以通过事先生成相应的 DOM 节点和图层作为占位符来避免加载后的图层结构发生剧烈变化。
