浏览器详解(四) 渲染

大家好，我是半虹，这篇文章来讲浏览器渲染

---

1、基本介绍

浏览器是多进程多线程的架构，包括有浏览器进程、渲染器进程、GPU 进程、插件进程等

在上篇文章中我们介绍过浏览器进程，作为浏览器主进程，负责浏览器基本界面的交互和底层功能的执行

在这篇文章中我们来介绍渲染器进程，这是浏览器的内核，也称为渲染进程

渲染进程负责标签页内所发生的事情，主要包括页面渲染、脚本执行、事件处理等

其中包含多个重要的线程以协同工作：

1. GUI 渲染线程：负责页面的渲染，解析 HTML、CSS，构建 DOM、CSSOM，布局和绘制等

           如果页面要回流或重绘，也由该线程去执行

2. JS  引擎线程：负责解析和执行 JavaScript 脚本，注意  JS 引擎线程与 GUI 渲染线程互斥

3. 事件触发线程： 控制事件循环，并管理事件队列

           若当 JS 引擎执行触发异步事件，会将对应的任务交给相应的线程执行处理

           等到任务完成之后，把任务对应的回调添加到事件队列，等待 JS 引擎处理

4. 定时触发线程： 负责处理特定任务，具体来说就是用于 setTimeout 和 setInterval 计时

           等到计时结束，通知事件触发线程，由事件触发线程将对应的回调加入队列

5. 异步请求线程： 负责处理特定任务，具体来说就是处理 AJAX 请求

           等到请求完成，通知事件触发线程，由事件触发线程将对应的回调加入队列

下面我们通过例子，异步请求和定时操作，来说明线程之间如何协同工作

上述多个线程大体上可以分成两组：

1. 渲染引擎：其中核心为 GUI 渲染线程
2. 脚本引擎：其中核心为  JS  引擎线程，辅助为事件触发线程、定时触发线程、异步请求线程

目前市面主流浏览器使用的渲染引擎和脚本引擎总结如下：

在这篇文章中我们主要介绍渲染过程，至于 JS 的解析过程，以后有空的话会专门再讲

好了，下面来正式开始介绍浏览器中的渲染过程

2、渲染流程

渲染引擎渲染页面的过程，也称为关键渲染路径，具体步骤如下：

1. 解析 HTML 构建 DOM

   具体步骤如下：

   转换：从网络或磁盘读取 HTML 文件原始字节，根据文件编码将字节转换为字符串

   分词：根据 HTML 规范，将上述字符串切分为不同的标记，如 、

   语法 分析：将上述标记转换为对象，对象中包含语法信息，如属性、属性值等信息

   DOM 构建：将上述对象链接在树状的结构中以标识父子和兄弟关系，这个树状结构就是 DOM

   
   

   需要注意的是：

   在读取 HTML 时，DOM 的构建已经开始，可以将上面的步骤理解成是流水线并行

   上一个步骤每完成一点，就会将结果传递给下一个步骤，不会等一个步骤完全执行完才进行下一个步骤

   
   

   关于脚本资源：

   当 HTML 解析器遇到