HTML 的底层原理

一、HTML 是什么

HTML（HyperText Markup Language，超文本标记语言）不是编程语言，而是一种结构化标记语言。

它用标签来描述网页内容的结构，比如标题、段落、图片、链接等。

二、HTML 在浏览器中的底层运行流程

浏览器渲染 HTML 页面时，大体会经历以下几个阶段：

bash 复制代码

HTML 源代码
 ↓
1. 解析（Parsing）
 ↓
2. DOM 树（Document Object Model）
 ↓
3. CSSOM 树（CSS Object Model）
 ↓
4. Render Tree（渲染树）
 ↓
5. Layout（布局计算）
 ↓
6. Painting（绘制）
 ↓
7. Compositing（合成）
 ↓
显示在屏幕上

三、详细原理分解

1. 解析（Parsing）

浏览器接收到 HTML 文本后，会先进行：

词法分析（Lexical Analysis）：将文本拆成一个个"标记"（Token），比如 <html>、<body>、<div>。
语法分析（Syntax Analysis）：根据这些标记构建出树状结构 ------ DOM 树。

实际上是通过"HTML Parser" 完成的。HTML Parser 是浏览器的一个专用解析器。

2. DOM 树（Document Object Model）描述 HTML 元素的结构

DOM 是浏览器内部在内存中生成的对象结构树。
每个 HTML 标签都会被解析为一个 Node（节点）对象。
JavaScript 可以通过 DOM API（如 document.querySelector()）操作这些节点。

📘 举例：

bash 复制代码

<html>
  <body>
    <h1>Hello</h1>
  </body>
</html>

DOM 树结构（简化）：

bash 复制代码

Document
 └── html
      └── body
           └── h1
                └── "Hello"

3. CSSOM 树-描述 CSS 样式规则。

浏览器同时解析 <style> 或外部 CSS 文件，构建 CSSOM（CSS 对象模型）。
这是样式的树状结构，用于后续计算每个节点的样式。

bash 复制代码

<style>
  body {
    margin: 0;
    color: black;
  }
  p {
    font-size: 16px;
  }
</style>

浏览器解析后形成的 CSSOM 树大致如下：

bash 复制代码

CSSOM
 ├── body
 │     ├── margin: 0
 │     └── color: black
 └── p
       └── font-size: 16px

4. Render Tree（渲染树）

浏览器将 DOM + CSSOM 合并，生成 Render Tree（渲染树）。
渲染树中只包含可见元素（例如 display: none 的不会出现）。

5. Layout（布局）

计算每个元素的具体几何位置和大小。
类似于给每个盒子确定坐标和尺寸。

6. Painting（绘制）

根据布局结果，绘制每个节点的背景、文字、边框、图片等。
这个阶段会生成位图（Bitmap）。

7. Compositing（合成）

现代浏览器采用分层渲染（Layer）。
每个图层在 GPU 上合成，最终在屏幕显示。

四、底层技术参与者

bash 复制代码

| 模块                         | 作用          | 所属引擎                 |
| -------------------------- | ----------- | -------------------- |
| HTML Parser                | 解析 HTML 文本  | 渲染引擎（如 Blink、WebKit） |
| CSS Parser                 | 解析样式表       | 渲染引擎                 |
| JavaScript 引擎（V8）          | 执行脚本，操作 DOM | JS 引擎                |
| Layout / Paint / Composite | 渲染页面        | 渲染引擎（GPU参与）          |

Chrome 使用 Blink 渲染引擎 + V8 JavaScript 引擎

五、浏览器优化机制

预解析（Preload Scanner）：HTML 解析时，提前加载 CSS、JS、图片。
懒加载（Lazy Loading）：滚动到可见区域才加载图片。
合成层（Compositor Layers）：GPU 加速渲染，减少重绘。
重排 / 重绘（Reflow / Repaint）优化。

六、总结一句话

HTML 底层原理就是浏览器将文本文件"翻译"为可视化结构的过程：

从源代码 → 解析为 DOM → 计算样式 → 绘制到屏幕，

期间由浏览器的渲染引擎完成一系列编译与图形渲染操作。