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

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

当您在浏览器中输入一个网址并按下回车键，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 并行构建，但渲染必须等待二者均完成才能进入下一步。

三、渲染树（Render Tree）的合成

DOM 与 CSSOM 合并后，浏览器生成渲染树（Render Tree）。该树仅包含需要视觉呈现的节点：剔除 <script></script>、<meta>、display: none 元素及其子树，保留可见文本、替换元素（如图片）、具有样式或内容的容器。

知识画家

AI交互知识生成引擎，一句话生成知识视频、动画和应用

8

查看详情

1、遍历 DOM 树的每个节点，检查其是否在 CSSOM 中匹配到有效样式且未被隐藏。

2、对每个匹配成功的节点，计算最终样式值（包括继承值、默认值和层叠结果）。

3、渲染树中的每个节点都携带几何信息占位符（如宽高、位置），但尚未进行实际布局计算。

四、布局（Layout）阶段

渲染树确定后，浏览器执行布局（也称重排，reflow），为每个渲染对象分配确切的屏幕坐标与尺寸。该过程从根节点（）开始，递归计算每个子节点的几何属性，考虑盒模型、浮动、定位、Flex/Grid 布局上下文等约束条件。

1、根节点根据视口宽度设定初始包含块（containing block）。

2、依次计算每个子节点的 width、height、top、left、margin、padding 等属性值。

3、布局结果形成一棵“布局树”，其中每个节点拥有确定的像素级位置与大小。

五、绘制（Paint）与图层合成

布局完成后，浏览器进入绘制阶段，将渲染树节点转化为屏幕上的像素。绘制操作被分解为多个绘制项（paint records），按层（layer）组织。具有独立图层的元素（如含 transform、opacity、will-change 的元素）会被分离至单独的位图缓冲区。

1、为每个图层生成绘制指令列表，包括背景填充、边框绘制、文字光栅化、阴影绘制等。

2、CPU 执行绘图指令，将矢量指令转为像素数据（光栅化），存入各图层的位图缓存。

3、合成器线程将所有图层按 z-index 和透明度混合，输出最终帧并提交给 GPU 渲染到屏幕上。

以上就是html是如何工作的_html工作原理详解【教程】的详细内容，更多请关注php中文网其它相关文章！