浏览器解析 HTML 资源的过程是将 HTML 文档转换为浏览器可以理解和呈现的结构的关键步骤。这个过程涉及多个阶段，从接收到 HTML 文档开始，到最终生成 DOM 树并准备渲染。以下是详细的解析过程：
1. 接收 HTML 文档
- 当用户访问一个网页时，浏览器通过 HTTP 请求从服务器获取 HTML 文档。
- 一旦接收到文档，浏览器会开始解析。
2. 词法分析（Lexical Analysis）
- 浏览器将 HTML 文档的字符流转换为标记（tokens）。
- 标记是 HTML 文档的基本组成部分，如标签（
<div>、<p>）、属性（class、id）和文本内容。 - 这个过程会识别出开始标签、结束标签、文本节点和注释。
3. 构建 DOM 树
- 解析器使用生成的标记来构建 DOM（文档对象模型）树。
- DOM 树是一种树形结构，其中每个节点代表 HTML 文档中的一个元素、属性或文本。
- 解析器会遵循 HTML 的嵌套规则，将元素正确地嵌套在其父元素下。
4. 处理外部资源
- 当浏览器遇到
<link>、<script>和<img>等标签时，它会识别这些外部资源并请求它们。 - 对于
<link>和<style>标签，浏览器会解析 CSS 并构建 CSSOM（CSS 对象模型）树。 - 对于
<script>标签，默认情况下，浏览器会暂停 DOM 解析，直到 JavaScript 被完全下载和执行（除非使用async或defer属性）。
5. 生成渲染树
- 一旦 DOM 和 CSSOM 树都构建完成，浏览器会合并它们生成渲染树。
- 渲染树只包含可见的元素，反映了 DOM 和 CSSOM 的结合。
- 渲染树中的每个节点代表一个需要被绘制的元素，并包含它的样式信息。
6. 布局计算（Layout）
- 浏览器计算渲染树中每个节点的大小和位置，决定它们在视口中的具体布局。
- 这个过程称为布局或重排（reflow），在窗口大小变化、样式变更或 DOM 结构修改时可能会被触发。
7. 绘制（Painting）
- 最后，浏览器根据渲染树的布局信息，将每个节点绘制到屏幕上。
- 绘制过程将视觉样式应用于每个元素，生成最终的页面。
8. 总结
- 异步加载：如果有外部资源（如 JS 和 CSS），浏览器可能会通过异步请求来提高性能。
- 重排和重绘：在解析和渲染过程中，可能会因为 DOM 或 CSSOM 的变化触发重排（layout）和重绘（paint）操作。
- 优化策略：合理组织 HTML 结构、减少 DOM 节点数量、避免阻塞渲染的资源（如 JS），可以提高解析效率。
9. 流程图概述
1. 接收 HTML 文档
↓
2. 词法分析 → 生成标记（tokens）
↓
3. 构建 DOM 树
↓
4. 处理外部资源（CSS、JS）
↓
5. 生成 CSSOM 树
↓
6. 合并 DOM 和 CSSOM → 生成渲染树
↓
7. 布局计算
↓
8. 绘制到屏幕
这个过程确保了浏览器能够快速、高效地解析和渲染网页，使用户获得良好的浏览体验。
