跳到主要内容

浏览器是怎么解析 HTML 文档的？

浏览器解析 HTML 文档的过程是一个复杂的过程，涉及多个阶段，主要分为以下几个步骤：

1. 接收 HTML 文件​

  • 浏览器通过发送 HTTP 请求获取服务器返回的 HTML 文件。该文件可能会包含外部资源（如 CSS、JavaScript、图片等），浏览器会逐步处理这些内容。

2. 构建 DOM 树​

  • 词法分析（Tokenization）：浏览器开始解析 HTML 文档时，将 HTML 源代码拆分为一系列的“标记”或“词法单元”（tokens）。这些标记对应 HTML 标签、属性和文本。
  • 构建 DOM 树（Document Object Model）：浏览器根据这些标记构建一个 DOM 树。DOM 树的每个节点代表 HTML 文档的一个元素（如 <div>、<p>）或文本内容，形成一个层次结构。
  • 节点顺序：解析 HTML 文档时，浏览器会根据标签的嵌套关系将它们组织成树状结构。例如，<html> 元素是根节点，<head> 和 <body> 是其子节点，等等。

3. 解析 CSS（样式处理）​

  • 在构建 DOM 树的同时，浏览器会遇到 <style> 标签或者外部 CSS 文件的链接（如 <link rel="stylesheet">），浏览器会下载并解析这些 CSS 规则。
  • 浏览器将 CSS 规则应用到相应的 DOM 节点，生成 CSSOM 树（CSS Object Model），它表示页面上所有样式的结构。
  • 通过将 DOM 树和 CSSOM 树结合，生成 渲染树（Render Tree），它包含了页面中所有可见元素的样式信息。

4. 生成渲染树​

  • 渲染树由 DOM 树和 CSSOM 树组合而成，包含了页面中所有需要呈现的元素以及它们的样式信息。
  • 渲染树不包括像 <head> 标签或隐藏元素（例如 display: none 的元素），只有可见的元素和它们的样式才会被包含在内。
  • 例如，一个 <div> 元素的渲染树节点会包含该 div 的位置、大小、颜色等样式信息。

5. 布局（Layout / Reflow）​

  • 布局阶段：浏览器通过渲染树来确定每个元素的准确位置和大小。浏览器计算每个元素的几何位置，得到每个元素在页面上的精确位置。
  • 如果布局发生了改变（例如窗口尺寸变化，或者某个元素的尺寸改变），浏览器需要重新计算布局，这个过程叫做 重排（Reflow）。

6. 绘制（Paint）​

  • 绘制阶段：浏览器会将布局好的元素按照样式规则渲染到屏幕上，绘制每个元素的颜色、边框、阴影等外观。这个过程称为 绘制（Paint）。
  • 例如，浏览器会绘制元素的背景色、文本、边框等，生成最终的页面显示内容。

7. 合成层（Composite）​

  • 在绘制完成后，浏览器可能会将渲染的内容分为多个层。某些元素（如动画、滚动条、固定定位的元素等）可能需要单独的图层。
  • 合成阶段：浏览器将这些层合成，最终生成显示在屏幕上的完整页面。

8. 执行 JavaScript​

  • 如果页面中有 JavaScript 代码，浏览器会在文档解析过程中执行它。JavaScript 代码通常会在 HTML 中的 <script> 标签内被嵌入或通过外部文件引入。
  • 影响：JavaScript 可能会修改 DOM 或 CSSOM，导致重新计算布局（Reflow）或重新绘制（Repaint）。因此，JavaScript 执行的时机和顺序可能会影响页面的渲染性能。

9. 事件监听与交互​

  • 一旦页面的初始渲染完成，用户可以与页面进行交互。浏览器会监听用户的输入、鼠标点击、键盘事件等，并相应地触发 JavaScript 代码进行处理。