04_浏览器页面渲染

一. 导航

• 用户发出URL请求到页面开始解析的过程

1. 用户输入

2. URL请求过程

• 通过IPC把URL请求发送到网络进程
• 网络进程发送网络请求，并接收响应数据（响应行、响应头、响应体）
• 网络进程解析响应头

3. 准备渲染进程

• 默认：一个页面一个渲染进程

4. 提交文档

• 文档：URL请求的响应体数据

二. 渲染流程

1. 构建DOM树

解析HTML成为浏览器可以理解的DOM

• HTML解析器解析HTML，输出树状结构的DOM
• 标签和内容均成为DOM树的结点

2. 样式计算

计算出所有节点的样式

• CSS文本转换为styleSheets结构
• 属性值标准化
• 计算节点具体样式
  • 继承
  • 层叠

3. 布局阶段

计算出可见元素的几何位置

• 创建布局树，仅包含可见元素
• 布局计算，计算节点坐标位置，保存在布局树中

4. 分层

为特定节点生成专用图层，方便实现效果

• 生成图层树。一些节点没有对应的层就从属于父节点的图层
• 满足条件：
  • 拥有层叠上下文属性
  • 需要剪裁的地方，如文字溢出、滚动条等

5. 图层绘制

对图层树的每个图层进行绘制

• 图层的绘制拆分成很多小的绘制指令，再按顺序组成绘制列表
• 绘制列表是一种记录

6. 栅格化

将图块转换为位图

• 绘制列表会提交给合成线程执行
• 合成线程会将图层划分为图块
• 合成线程会按照视口附近的图块来优先生成位图，实际生成位图的操作是由栅格化来执行的

视口：页面很大时，用户可以看到的其中一部分

• 栅格化过程会使用GPU加速生成

7. 合成和显示

将所有内容显示到屏幕上

• 图块光栅化后，合成线程生成绘制图块命令
• 浏览器进程接收指令，将内容绘制到内存中，最后将内存显示在屏幕上

学习资料

李兵：《04丨导航流程：从输入URL到页面展示，这中间发生了什么？》
《05丨渲染流程（上）：HTML、CSS和JavaScript，是如何变成页面的？》
《06丨渲染流程（下）：HTML、CSS和JavaScript，是如何变成页面的？》