页面渲染原理

从URL到页面渲染过程

1. 浏览器解析URL

2. 浏览器检查是否有缓存

3. DNS解析（迭代）

   1. 客户端向本地域名服务器发送域名解析请求，成为本地域名服务器的一个客户

   2. 本地域名服务器向根域名服务器查询

   3. 本地域名服务器向顶级域名服务器查询

   4. 本地域名服务器向二级域名服务器查询

   5. ......

   6. 本地域名服务器向权限域名服务器查询，得到服务器的ip地址。

   7. 本地域名服务器将查询结果返回给客户端

   DNS查询有迭代和递归两种方式，并且发送的数据单元是UDP(为了节省资源)

4. 客户端与服务器建立TCP连接（三次握手）

   1. 客户端发送SYN报文给服务器

   2. 服务器返回SYN-ACK报文

   3. 客户端返回ACK报文

   三次握手的作用有二：一是为了验证双方的发送和接收能力，二是为了避免建立无效的TCP连接。

5. 客户端发送HTTP请求

6. 服务器接收处理后发送响应报文

7. 客户端接收后浏览器进行页面渲染

   1. 将HTML解析为DOM树，加载子资源。

   2. 样式计算。生成每个节点的计算样式

   3. 布局。遍历DOM树和计算样式来创建布局树，布局树上包含所有页面上存在的节点的几何属性和样式。

   4. 绘制。遍历布局树生成绘制记录。

   5. 合成。遍历布局树来生成层树，将页面分割为不同的图层，然后将图层分别进行栅格化，然后合成器合成帧并渲染出来，当页面滚动时移动图层合成新的帧来生成滚动动画。