从输入 URL 到页面显示，经历了哪些过程

一、网络部分

1. 根据输入的 URL 构建 HTTP 请求
2. 查找缓存：如果命中直接使用，否则进入下一步
3. DNS 解析：将域名映射为 IP 地址
4. 建立 TCP 连接，发送 HTTP 请求

二、浏览器解析

1. 根据 HTML 代码，构建 DOM 树

2. 根据 CSS 代码，构建样式树。 这一步涉及的内容：

• 格式化样式表。将 link 标签引入的外部样式、style 标签中的样式、标签的内嵌样式进行整合
• 标准化样式属性。如将em转换为px，颜色red转换为#ff0000
• 计算每个节点的具体属性

3. 生成 render 树，和 DOM 树基本对应，但只包含可见元素

4. 生成布局树。在这一步确定了节点的坐标位置和尺寸

三、渲染过程

1. 建立图层树。

   目的：显示 3D 动画的变换效果，以及当元素含有层叠上下文时如何控制显示和隐藏。

一般的节点会默认属于父节点的图层（父节点的图层称为合成层），但有些情况下，会将其自身提升为合成层：

• 设置了position属性，且设置了z-index
• opacity取值不为 1
• transform不为 none
• isolation取值为isolation
• 内容需要剪裁（如文字溢出）
• 隐式合成：层叠等级低的节点提升后，所有层级比它高的节点都会提升

2. 生成绘制列表：将图层的绘制拆分为一个个绘制指令。

3. 将图层分块。由合成线程生成低分辨率的图块

4. 栅格化线程生成高分辨率的位图

5. 栅格化操作完成后，显示器显示内容