深入理解HTML页面加载解析和渲染过程（一）

一篇老文章，存在草稿有点可惜

HTML页面呈现通常包括三个主要过程：加载、解析和渲染。让我们详细探讨每个过程。

1. 加载过程

加载过程主要涉及获取页面所需的所有资源。这个过程包括以下步骤：

1.1 URL资源加载

缓存读取：浏览器首先检查是否有所请求资源的有效缓存。如果有,直接使用缓存,减少网络请求。
DNS解析：如果没有缓存,浏览器需要将域名解析为IP地址。这个过程可能涉及多个DNS服务器。
建立TCP连接：使用解析得到的IP地址,客户端与服务器建立TCP连接。
TLS握手：如果使用HTTPS,还需要进行TLS握手来建立安全连接。
HTTP请求：发送HTTP请求,获取所需的HTML文件。
接收响应：服务器处理请求并发送响应,客户端接收数据。

1.2 其他资源加载

在解析HTML的过程中,浏览器会发现并开始加载其他资源,如CSS、JavaScript、图片等。
现代浏览器通常会并行加载多个资源以提高效率。

2. 解析过程

解析过程将加载的资源转换为浏览器可以理解和使用的结构。

2.1 HTML解析

字节序列解析：将接收到的字节序列转换为字符。
标记化：将字符串解析为一系列标记(tokens)。
构建DOM树：基于标记创建文档对象模型(DOM)树。

2.2 CSS解析

解析CSS文件和<style>标签内容。
构建CSS对象模型(CSSOM)树。

2.3 JavaScript解析和执行

解析JavaScript代码。
执行脚本,可能会修改DOM和CSSOM。

3. 渲染过程

渲染过程将解析后的结构转换为屏幕上的像素。

3.1 构建渲染树(Render Tree)

HTML页面呈现过程详解

前面的内容保持不变

3. 渲染过程

3.1 构建渲染树(Render Tree)

渲染树的构建是将DOM树和CSSOM树结合起来的过程,只包含需要显示的节点。

输入:

DOM树

结构: 树形结构
节点类型: 元素节点、文本节点、注释节点等

示例:

复制代码

html
├── head
│   ├── title
│   └── meta
└── body
    ├── div
    │   ├── h1
    │   └── p
    └── img

CSSOM树

结构: 树形结构
节点类型: 样式规则、选择器

示例:

复制代码

Styles
├── body
│   └── background-color: white
├── h1
│   ├── color: black
│   └── font-size: 24px
└── .hidden
    └── display: none

处理过程:

遍历DOM树
对每个可见的DOM节点,找到匹配的CSSOM规则并应用它们
忽略不可见的元素(如script、meta标签,或设置了display: none的元素)

输出: 渲染树

结构: 树形结构
节点类型: 渲染对象(如RenderBlock, RenderInline, RenderText等)
每个节点包含的信息:
- 对应的DOM元素
- 计算后的样式
- 几何信息(在后续布局阶段填充)

示例:

复制代码

RenderBody
└── RenderBlock (div)
    ├── RenderBlock (h1)
    │   └── RenderText
    └── RenderBlock (p)
        └── RenderText

特点:

渲染树不包含隐藏元素,如设置了display: none的元素或<head>内的元素
可能包含一些DOM树中不存在的节点,如伪元素(:before, :after)
每个渲染对象对应一个CSS盒模型
文本节点通常会被包含在渲染对象内,而不是作为单独的节点

渲染树的构建为后续的布局和绘制过程奠定了基础。它确保了只有需要显示的元素才会被进一步处理,从而优化了渲染性能。

后面的内容保持不变

3.2 布局(Layout)

计算每个可见元素的精确位置和大小。
这个过程也称为"重排"(reflow)。

3.3 生成图层树(Layer Tree)

将渲染树分割成多个图层。
某些元素(如使用z-index的元素)会形成单独的图层。

3.4 绘制(Paint)

填充图层的像素。
通常包括文本、颜色、图像、边框和阴影等的绘制。
绘制通常happens在多个表面(称为合成层)。

3.5 合成(Compositing)

将绘制的图层按照正确的顺序合并,以正确处理重叠元素和透明度。
最后将结果显示在屏幕上。

页面更新过程

当页面内容发生变化时,浏览器会尽可能高效地更新屏幕。

回流(Reflow)

当元素的大小、位置或页面布局发生变化时触发。
需要重新计算布局,代价较高。

重绘(Repaint)

当元素外观(如颜色)改变,但不影响布局时触发。
不需要重新计算布局,但仍需要更新像素。

合成

某些更改(如简单的变换或透明度变化)可以仅通过合成来处理。
这是最高效的更新方式,不需要重排或重绘。

优化网页性能时,应尽量减少回流和重绘,多利用仅需合成的属性来实现动画效果。