浏览器渲染

浏览器渲染原理

参考：https://blog.csdn.net/Hansen_Huang/article/details/107846219

浏览器的渲染过程是一个复杂的过程，因此如何把复杂的东西简单阐述明白，是一件技术活。首先，渲染过程我们分为两个阶段来理解：

导航过程和页面解析过程。

一. 导航过程

1.输入url之后开始请求，浏览器进程先把url转发给网络进程，网络进程开始真正的请求，在任务管理器可以看到浏览器的网络进程。是否之前已有缓存，是否合并为同一请求，是否为新发起的请求，都由网络进程判断处理，这里不展开说明。
2.网络进程开始DNS解析，获取服务地址的IP置地址，网络进程请求到数据之后，转发响应头的数据给浏览器进程（响应头包括响应头，响应行，响应体）。
3.浏览器接受到响应头数据之后，随之发消息给渲染进程。
4.渲染进程收到消息之后，随之与网络进程建立数据通道，网络进程将请求到的数据传递给渲染进程。通道建立完毕，数据接受完毕，渲染进程会向浏览器进程发出“已经准备好解析页面数据，确认提交”的消息。
5.浏览器进程接收到渲染进程确认提交的消息之后，开始移除旧文档，开始更新页面，导航结束开始进入解析阶段。

二. 页面解析

页面解析，实质上就是html，css，js的解析过程，这个过程有个专业术语叫渲染流程。
那这个流程到底是怎么样渲染，才能显示出一个漂亮的页面？其实很多人大体知道，但是不知如果完整的答上来，接下来我就整合下，把一些要点列出来。

渲染过程也是一个非常复杂的东西，所以渲染模块在执行的过程中会划分很多子阶段，按照渲染的时间顺序，大致可分为下面几个子阶段：构建 DOM 树、样式计算、布局阶段、分层、绘制、分块、栅格化和合成；
1.生成DOM树

浏览器实质上不能直接理解使用HTML，所以要将HTML转化为浏览器能理解的结构—DOM树。（打开控制台，输入document，你就能看到真正的DOM树）
2.样式计算

浏览器实质上也不能直接理解和使用CSS,会将其转换为浏览器可以理解的结构—styleSheets（层叠样式表）。（你可以在控制台，输入document.styleSheets，就可以看到样式表的样子了）
样式计算主要包括：css转化成样式表，转换属性值（全部变成px），计算具体样式（层叠规则和继承规则而来的一些样式）
3.布局阶段

这个阶段下有两个操作：1.创建布局树，目的是把不可见的元素剔除，输出最终可见的DOM节点。2.布局计算，目的计算每个元素位置
4.分层

浏览器的页面是三维的，因此要计算每个元素的层级
5.图层绘制

如：你在纸上画一个红色的圆点，是不是要先画好一个圆再涂上红色。浏览器的绘制阶段也是如此。
6.栅格化

栅格化内容比较多，这里只是简要的带过：合成线程会按照视口附近的图块来优先生成位图，实际生成位图的操作是由栅格化来执行的。所谓栅格化，是指将图块转换为位图。而图块是栅格化执行的最小单位。渲染进程维护了一个栅格化的线程池，所有的图块栅格化都是在线程池内执行的。

7.合成与显示

一旦所有图块都被栅格化，合成线程就会生成一个绘制图块的命令——“DrawQuad”，然后将该命令提交给浏览器进程，这样就会显示出一个漂亮的页面了。

渲染完成。