当前位置：首页 > article >正文

浏览器工作原理深度解析（阶段二）：HTML 解析与 DOM 树构建

article 2025/3/22 19:31:25

一、引言

在阶段一中，我们了解了浏览器通过 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));
}