深入理解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)
- 当元素外观(如颜色)改变,但不影响布局时触发。
- 不需要重新计算布局,但仍需要更新像素。
合成
- 某些更改(如简单的变换或透明度变化)可以仅通过合成来处理。
- 这是最高效的更新方式,不需要重排或重绘。
优化网页性能时,应尽量减少回流和重绘,多利用仅需合成的属性来实现动画效果。