浏览器渲染原理

这也许是一道面试题，同样也是关于到线程跟进程，在上次文章中有一点点的讲解，有兴趣的可以观看，本次的总结属于个人学习后的一个总结，可能不是一个完整的答案，但希望能对大家有一些启发；最后如有问题可私信或评论。

重点内容为第二部分。

一、浏览器渲染的过程

当我们拿到一个网址并打开时，浏览器就开始的整个渲染过程。

整个过程可以分成两步：

1.网络请求

浏览器会发送请求，随后拿到HTML文档，生成一个渲染任务，并将其交给渲染队列；

2.渲染(本次主要总结内容)

渲染队列开始进行解析及渲染。

这就是浏览器的渲染过程，但在这个渲染过程中又发生了什么呢，下面开始讲解。

二、渲染流程

渲染流程大致分为8个阶段：HTML解析、样式计算、布局、分层、绘制、分块、光栅化、画。

每个阶段都有明确的输入输出，可以理解为整个过程为一个组织严谨的生产流水线。

1.解析HTML

解析过程可以分成两个线程(一个为主线程，一个为预解析线程)，

主线程遇到link时，不会等待去下载CSS文件，而是继续解析后续的HTML；这时预解析线程开始下载和解析CSS。正是因为有预解析线程，所以CSS不会阻塞HTML解析。

主线程遇到script时，会停止解析HTML，转而等待JS问价下载好，解析完JS代码后，才会继续解析HTML。与CSS的不同之处在于JS代码的执行过程中有可能修改当前的DOM树，所以DOM树的生成必须赞成，这也是JS会阻塞HTML解析的原因。

在本次过程中，输入的是请求过来的HTML文档，输出的是DOM树和CSSOM树(浏览器的默认样式、内部样式、外部样式、行内样式均会包含在CSSOM树中)

注意：不会生成JS树，因为JS代码只需要执行一遍，后续的步骤用不到JS

2.样式计算

主线程通过遍历的方式，对DOM树中的每个节点进行计算，得到最终的样式

在本次过程中，输入的是DOM树和CSSOM树，输出的是带有样式的DOM树

3.布局

依次遍历DOM树的每一个节点，计算每个节点的几何信息，并输出Layout树

在本次过程中，输入的是带有样式的DOM树，输出的是Layout树

注意：DOM树的结构和Layout树不一定一一对应(有多种原因)

4.分层

主线程使用一套复杂的流程对整个布局树中进行分层；

好处：当某个层发生改变，仅会对某个层进行处理，提升效率

在本次过程中，输入的是Layout树，输出的是分层结果

5.绘制

主线程根据分层结果生成对应的绘制指令(用于描述这一层如何画出来，并没有开始绘制)

在本次过程中，输入的是分层结果，输出的是绘制指令

6.分块

主线程将每个图层的绘制信息提交给合成线程，剩余工作由合成线程完成；

合成线程会使用多个线程来将每个图层进行分块；

在本次过程中，输入的是绘制指令，输出的是分块信息

7.光栅化

合成信息将分块信息交给GPU进程，让GPU进程完成光栅化

GPU会优先处理靠近视口区域的快；

光栅化的结果就是产生一块一块的位图

在本次过程中输入的是分块信息，输出的是位图

8.画

合成线程拿到每个位图后，生成指引(quad)信息，并将其交给GPU进程，由GPU进程产生系统调用，提交给硬件，完成最终的屏幕成像。

在本次过程中输入的是位图，输出的是最终的屏幕成像

以上便是本次的总结，最后祝大家元宵节快乐