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 的同时，浏览器会识别 和 标签，并发起对 CSS 资源的请求。CSS 文件下载完成后，CSS 解析器将其解析为 CSS 对象模型（CSSOM），该模型是独立于 DOM 的树形结构，记录每条规则的选择器及其声明块。
1、浏览器为每个 CSS 文件创建独立的 CSSOM 树，合并所有内联、内部与外部样式表。
2、CSSOM 中的规则按特异性（specificity）排序，高优先级规则覆盖低优先级规则。
3、CSSOM 与 DOM 并行构建，但渲染必须等待二者均完成才能进入下一步。
三、渲染树（Render Tree）的合成
DOM 与 CSSOM 合并后，浏览器生成渲染树（Render Tree）。该树仅包含需要视觉呈现的节点：剔除 、、display: none 元素及其子树，保留可见文本、替换元素（如图片）、具有样式或内容的容器。
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工作原理详解【教程】的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1606491.html
微信扫一扫 
支付宝扫一扫 
