> For the complete documentation index, see [llms.txt](https://1425816423.gitbook.io/my-knowledge-base/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://1425816423.gitbook.io/my-knowledge-base/qian-duan-ji-shu/liu-lan-qi-yuan-li/ye-mian-xuan-ran-yuan-li.md).

# 页面渲染原理

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