浏览器

浏览器

渲染引擎

世界五大浏览器，在自身发展时都使用了一种或多种渲染引擎作为自身的渲染引擎。

• Google Chrome：Webkit(前期)、Blink(后期)
• Apple Safari：Webkit
• Mozilla Firefox：Gecko
• ASA Opera：Presto(前期)、Blink(后期)
• Microsoft IExplorer：Trident
• Microsoft Edge：Trident(前期)、Blink(后期)

关键渲染路径

关键渲染路径指浏览器从最初接收请求得到HTML、CSS、JS等资源，然后解析、构建、渲染、布局、绘制和合成，到最后呈现在用户眼前的整个过程。

将关键渲染路径划分理解，那网页的渲染过程可分为以下部分。

解析文件

• DOM树：将html文件转换为DOM树

• CSSOM树：将css文件转换为CSSOM树

• 渲染树：将DOM树与CSSOM树合并生成渲染树

绘制图层

• 回流：根据渲染树生成布局渲染树

• 重绘：根据布局渲染树生成绘制渲染树

• 合成图层：根据绘制渲染树合成图层显示在屏幕中

解析文件

HTML文档描述网页的结构，浏览器通过HTML解析器将HTML解析为DOM树结构。HTML文档中所有内容皆为节点，各节点间拥有层级关系，彼此相连，组成DOM树。

构建DOM树的过程：读取HTML文档的字节(Bytes)，将字节转换成字符(Chars)，根据字符确定标签(Tokens)，将标签转换成节点(Nodes)，以节点为基准构建DOM树。

CSS文档描述网页的表现，浏览器通过CSS解析器将CSS解析为CSSOM树结构，与DOM树结构较像。CSS文档中所有内容皆为节点，与HTML文档中的节点一一相应，各节点间拥有层级关系，彼此相连，组成CSSOM树。

构建CSSOM树的过程：读取CSS文档的字节(Bytes)，将字节转换成字符(Chars)，根据字符确定标签(Tokens)，将标签转换成节点(Nodes)，以节点为基准构建CSSOM树。与DOM树的构建过程完全一样。

在构建DOM树时，当HTML解析器遇到<script>时会立即阻塞DOM树的构建，将控制权移交给浏览器的JS引擎，等到JS引擎运行完毕，浏览器才会从中断的地方恢复DOM树的构建。

HTML