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

若干年前，我写过一篇介绍浏览器渲染流水线的文章 - How Rendering Work (in WebKit and Blink)，这篇文章，一来部分内容已经过时，二来缺少一个全局视角来对流水线整体进行分析，所以打算重新写一篇新的文章，从一个更高抽象层次和高度简化的方式对浏览器的渲染流水线进行解析，能让大部分页端同学都能够看的明白，并以此作为指引来分析和优化页面的渲染／动画性能。

有些基本概念如图层，分块，光栅化基本没有发生变化，如果读者不理解的话请参考 How Rendering Work (in WebKit and Blink)，本文不再过多解释。

本文基于当前版本的 Chrome 浏览器写成（60 左右），理论上部分知识可以应用于其它浏览器（当然术语会有一定差别）或者 Chrome 后续的版本，但是并不完全保证这一点。

1. 渲染流水线

上图显示了 Chrome 一个高度简化后的渲染流水线示意图：

1. 最底层的是 Chrome 最核心的部分 Blink，负责JS的解析执行，HTML/CSS解析，DOM操作，排版，图层树的构建和更新等任务；