浏览器渲染流水线解析（四）

5 非合成器动画性能分析和优化指南

前面已经我们已经把非合成器动画区分为 Blink 触发，无法由合成器运行的动画和由 Timer/RAF 驱动的 JS 动画两类，因为前者可以认为是后者的一个简化版本，所以这一章主要讨论 Timer/RAF 驱动的 JS 动画。

5.1 动画流水线

从上图可以看出非合成器动画的流水线比合成器动画更长更复杂，并且非合成器动画的后半段跟合成器动画是一致的。

1. JavaScipt 部分是页端实现的逻辑，可能包含了计算的部分，和调用浏览器提供的 API 的部分（修改 DOM 树，CSS 属性等），最终改变了网页的内容；
2. 网页内容被改变会导致 Blink 生成新的 MainFrame，MainFrame 包括了重排版，更新图层树，和重新记录发生变更的图层的内容，生成新的 DisplayList，等等；
3. Blink 生成新的 MainFrame 后需要向合成器发起 Commit 的请求，合成器在 Commit 过程中根据 MainFrame 生成自身的图层树，Blink 在 Commit 的过程中保持阻塞状态，Commit 完成后再继续运行；
4. 合成器实际上有两棵图层树，新提交的 MainFrame 生成的是 Pending 树，用于绘制 Draw 的是 Active 树，只有当 Pending 树当前可见区域部分的分块全部完成 Rasterize 后，才会进入 Active 步骤，在 Active 的过程中，