浏览器加载网页时，首先请求HTML文件并解析生成DOM树，同时解析CSS构建CSSOM，二者结合形成渲染树；随后进行布局计算元素位置，再将节点绘制为像素并分层合成最终画面输出到屏幕。
如果您在浏览器中打开一个网页，看到的内容是由HTML代码转换而来的可视化界面，这一过程涉及多个组件协同工作。以下是解析HTML代码运行机制的具体步骤：
一、加载HTML文件
当用户输入网址或点击链接时，浏览器会向服务器发起请求以获取对应的HTML文件。此阶段的目标是将原始的HTML文本从远程服务器传输到本地设备。
1、浏览器根据URL解析出目标服务器地址，并建立HTTP连接。
2、发送GET请求获取HTML资源文件。
立即学习“前端免费学习笔记（深入）”；
3、接收到服务器返回的HTML内容后，将其传递给渲染引擎进行下一步处理。
二、构建DOM树
浏览器的渲染引擎开始逐行读取HTML代码，并将其转换为文档对象模型（DOM）。DOM是一个树状结构，代表页面中的所有元素及其层级关系。
1、解析器从上到下读取HTML标记，遇到标签时创建对应的节点对象。
2、根据嵌套关系将节点连接成父子结构，形成完整的DOM树。
3、如果遇到script标签且无异步属性，会暂停DOM构建直到脚本执行完毕。
三、解析CSS并构建CSSOM
为了确定每个DOM节点的样式，浏览器需要解析页面中的CSS规则，并生成CSS对象模型（CSSOM），该结构同样为树形。
1、浏览器识别HTML中的内联样式、内部style标签以及外部CSS文件链接。
2、下载外部CSS资源并解析其中的选择器和声明块。
3、将解析后的规则组织为具有层级关系的CSSOM树，用于后续与DOM合并。
四、生成渲染树
渲染树由DOM和CSSOM共同合成，仅包含需要显示的节点及其计算后的样式信息。隐藏元素如display: none不会被包含在内。
1、遍历DOM树中的每一个可见节点。
2、查找CSSOM中对应的选择器规则，应用最终的样式值。
3、组合结果形成一棵可用于布局的渲染树，不包括脚本控制下被移除或隐藏的元素。
五、布局与重排
在渲染树生成后，浏览器计算每个元素在视口内的几何位置和尺寸，这个过程称为布局（Layout）或重排（Reflow）。
1、从根元素开始递归遍历渲染树节点。
2、依据盒模型计算宽度、高度及相对位置。
3、任何导致尺寸变化的操作都会触发重新计算布局，影响性能。
六、绘制与合成
完成布局后，浏览器将各个元素绘制为像素信息，并通过分层合成最终图像输出到屏幕。
1、将渲染树的每个节点绘制成位图，通常在GPU中进行加速。
2、对复杂区域如视频、动画进行独立图层划分。
3、由合成线程将各图层合并为单一画面并提交给显示系统刷新。
