一、引言
在阶段一中，我们了解了浏览器通过 HTTP/HTTPS 协议获取页面资源的过程。本阶段将聚焦于浏览器如何解析 HTML 代码并构建 DOM 树，这是渲染引擎的核心功能之一。该过程可分为两个关键步骤：词法分析（Token 化）和语法分析（DOM 构建）。
二、HTML 解析核心流程
1. 词法分析：字符流到 Token 的转换
状态机实现：
浏览器通过状态机将字符流转换为 Token。例如，当遇到<时进入标签状态，根据后续字符判断是开始标签、结束标签还是注释。以下是状态机的简化实现：
function tagOpenState(c) {if (c === '/') return endTagOpenState;if (c.match(/[A-Za-z]/)) {const token = new StartTagToken();token.name = c.toLowerCase();return tagNameState;}// 其他状态处理...
}
常见 Token 类型：
| Token 类型 | 示例 | 说明 |
|---|---|---|
| 开始标签 | <p | 包含标签名和属性 |
| 结束标签 | </p> | 闭合对应开始标签 |
| 文本节点 | text content | 标签内的文本内容 |
| 注释节点 | <!-- comment --> | 被解析器忽略的注释内容 |
2. 语法分析：栈驱动的 DOM 构建
栈结构管理：
function HTMLSyntaticalParser() {let stack = [new HTMLDocument()];this.receiveInput = (token) => {if (token.type === 'startTag') {const element = new Element(token.name);stack[stack.length-1].childNodes.push(element);stack.push(element);} else if (token.type === 'endTag') {stack.pop();}// 文本节点合并逻辑...};
}
构建规则：
- 开始标签创建新节点并入栈
- 结束标签弹出栈顶节点
- 文本节点合并相邻节点（连续文本合并为一个节点）
容错处理：
当遇到不匹配的标签（如</div>对应<p>），浏览器会自动调整栈结构，确保 DOM 树完整性。例如：
<div><p></div>
解析时会自动闭合</p>标签，最终 DOM 结构为：
<div><p></p>
</div>
三、浏览器优化技术
1. 增量式解析
浏览器采用流式解析，无需等待完整 HTML 下载即可开始渲染。例如：
<!DOCTYPE html>
<html>
<head><title>Example</title><style>body { color: red; }</style>
</head>
<body><h1>Hello World</h1><p>Streamed content starts here...
解析器在下载到h1标签时就开始构建 DOM 树，同时 CSS 解析器并行处理样式规则。
2. 预解析与资源加载
- 预加载扫描：解析 HTML 时同步解析
<link>和<script>标签 - 优先级调度：关键资源（如首屏 CSS）优先加载
- 推测加载：根据页面结构预判可能需要的资源（如图片、字体）
四、实践案例：实现简易 HTML 解析器
1. 词法分析器
class Lexer {constructor(input) {this.input = input;this.pos = 0;}nextToken() {while (this.pos < this.input.length) {const c = this.input[this.pos];if (c === '<') {this.pos++;return { type: 'tagStart', value: this.consumeTagName() };}// 处理文本节点...}}consumeTagName() {let name = '';while (this.pos < this.input.length && /[A-Za-z]/.test(this.input[this.pos])) {name += this.input[this.pos++];}return name;}
}
2. 语法分析器
class Parser {constructor(lexer) {this.lexer = lexer;this.stack = [new Document()];}parse() {let token;while (token = this.lexer.nextToken()) {if (token.type === 'tagStart') {const element = new Element(token.value);this.stack[this.stack.length-1].children.push(element);this.stack.push(element);} else if (token.type === 'tagEnd') {this.stack.pop();}}return this.stack[0];}
}
五、性能优化策略
1. 减少重排与重绘
- 批量修改 DOM：使用文档片段（DocumentFragment）
- CSS 优化：避免触发强制同步布局（如 offsetTop、scrollHeight）
- GPU 加速：利用 transform 和 opacity 属性
2. 解析性能优化
- 预加载关键资源：使用
<link rel="preload"> - 减少 DOM 深度：控制嵌套层级在 6 层以内
- 按需渲染：使用 Intersection Observer 懒加载
六、常见问题与解决方案
Q1：为什么解析速度会变慢？
- 可能原因：复杂的 CSS 选择器、大量 DOM 节点
- 解决方案：使用 Chrome DevTools 的 Performance 面板分析关键渲染路径
Q2：如何处理 HTML 语法错误？
// 错误恢复机制示例
try {parser.parse();
} catch (e) {console.error('Parsing error:', e);// 重置状态继续解析parser.reset();
}
Q3：如何验证 DOM 树正确性？
// 验证父子关系
function validateDOM(node, parent) {if (node.parent !== parent) {throw new Error('DOM树结构错误');}node.children.forEach(child => validateDOM(child, node));
}
七、总结
本阶段我们深入探讨了浏览器解析 HTML 并构建 DOM 树的核心机制。通过状态机实现的词法分析和栈驱动的语法分析，浏览器能够高效处理 HTML 代码并生成结构化的 DOM 树。理解这些过程对前端性能优化和复杂问题排查具有重要意义。下一阶段将聚焦 CSS 解析、布局计算和渲染流水线等核心机制。
