html是如何工作的_html工作原理详解【教程】

admin 百科 2025-12-20 9

HTML 工作流程分为五步：一、解析 HTML 构建 DOM 树；二、加载并解析 CSS 生成 CSSOM；三、合并 DOM 与 CSSOM 形成渲染树；四、布局计算各节点几何信息；五、绘制像素并图层合成显示。

html是如何工作的_html工作原理详解【教程】-第1张图片-佛山资讯网

当您在浏览器中输入一个网址并按下回车键，HTML 文档便开始参与页面的构建过程。浏览器接收到服务器返回的 HTML 文件后，会按照特定顺序解析、构建和渲染内容。以下是 HTML 工作流程的关键环节：

一、HTML 的解析与 DOM 树构建

浏览器接收到 HTML 字节流后，会启动 HTML 解析器，逐字节读取并识别标签、属性和文本内容。解析器依据 HTML 规范将原始代码转换为内存中的结构化对象模型，即文档对象模型（DOM）。该过程严格遵循嵌套关系和语义层级，忽略非法嵌套或未闭合标签的错误，但会尝试自动修复。

1、浏览器从网络层接收响应体中的 HTML 字节数据。

2、解析器将字节流解码为 Unicode 字符串，并按 tokenization 算法切分为起始标签、结束标签、自闭合标签、文本节点等标记。

立即学习“前端免费学习笔记（深入）”；

3、每个标记被转换为对应的 DOM 节点，按父子、兄弟关系组织成树状结构。

4、DOM 树不包含 CSS 样式或 JavaScript 行为，仅描述页面的结构与内容层次。

二、CSSOM 的生成与样式计算

在解析 HTML 的同时，浏览器会识别 <link rel="stylesheet"> 和 <style></style> 标签，并发起对 CSS 资源的请求。CSS 文件下载完成后，CSS 解析器将其解析为 CSS 对象模型（CSSOM），该模型是独立于 DOM 的树形结构，记录每条规则的选择器及其声明块。

1、浏览器为每个 CSS 文件创建独立的 CSSOM 树，合并所有内联、内部与外部样式表。

2、CSSOM 中的规则按特异性（specificity）排序，高优先级规则覆盖低优先级规则。

3、CSSOM 与 DOM 并行构建，但渲染必须等待二者均完成才能进入下一步。