一、引言
在階段一中，我們了解了瀏覽器通過 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 解析、布局計算和渲染流水線等核心機制。
