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

HTML 的底层原理

news 2025/10/28 6:44:21

一、HTML 是什么

HTML（HyperText Markup Language，超文本标记语言）不是编程语言，而是一种结构化标记语言。
它用标签来描述网页内容的结构，比如标题、段落、图片、链接等。

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

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

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()）操作这些节点。

📘 举例：

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

DOM 树结构（简化）：

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

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

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

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

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

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 上合成，最终在屏幕显示。

四、底层技术参与者

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