「二」浏览器的渲染流程及组成【必会！】

我们第一章讲了浏览器的组成原理，如果没有看到文章的话记得返回去看第一篇，在讲渲染流程之前先放上一篇文章用到的图：

image.png
上图是浏览器的主要组成部分，而渲染引擎是浏览器中的重要组成部分，其中图中的rendering Engine就是我们今天要讲的渲染引擎，首先了解下渲染引擎的工作流程

渲染引擎工作流程

image.png

（webkit渲染引擎流程）

关键渲染路径关键渲染路径是指浏览器从最初接收请求来的HTML、CSS、javascript等资源，然后解析、构建树、渲染布局、绘制，最后呈现给客户能看到的界面这整个过程。所以浏览器的渲染过程主要包括以下几步：

1.解析HTML生成DOM树。
2.解析CSS生成CSSOM规则树。
3.将DOM树与CSSOM规则树合并在一起生成渲染树。
4.遍历渲染树开始布局，计算每个节点的位置大小信息。
5.将渲染树每个节点绘制到屏幕。

构建DOM树

当浏览器接收到服务器响应来的HTML文档后，会遍历文档节点，生成DOM树。需要注意的是，DOM树的生成过程中可能会被CSS和JS的加载执行阻塞。渲染阻塞问题下文会讲。

构建CSSOM规则树

浏览器解析CSS文件并生成CSS规则树，每个CSS文件都被分析成一个StyleSheet对象，每个对象都包含CSS规则。CSS规则对象包含对应于CSS语法的选择器和声明对象以及其他对象。

构建渲染树

通过DOM树和CSS规则树我们便可以构建渲染树。浏览器会先从DOM树的根节点开始遍历每个可见节点。对每个可见节点，找到其适配的CSS样式规则并应用。

渲染树构建完成后，每个节点都是可见节点并且都含有其内容和对应规则的样式。这也是渲染树与DOM树的最大区别所在。渲染树是用于显示，那些不可见的元素当然就不会在这棵树中出现了，譬如。除此之外，display等于none的也不会被显示在这棵树里头，但是visibility等于hidden的元素是会显示在这棵树里头的。

渲染树布局

布局阶段会从渲染树的根节点开始遍历，然后确定每个节点对象在页面上的确切大小与位置，布局阶段的输出是一个盒子模型，它会精确地捕获每个元素在屏幕内的确切位置与大小。

渲染树绘制

在绘制阶段，遍历渲染树，调用渲染器的paint()方法在屏幕上显示其内容。渲染树的绘制工作是由浏览器的UI后端组件完成的。

参考文献：
http://chuquan.me/2018/01/21/browser-architecture-overview/
https://juejin.im/post/5a8e242c5188257a6b060000