浏览器按顺序执行HTML：先发起网络请求获取HTML及外部资源；再解析HTML构建DOM树，遇JS暂停解析并执行；同时解析CSS构建CSSOM树，最后结合二者渲染页面。
当您在浏览器中打开一个HTML文件时，浏览器会按照特定顺序解析和渲染页面内容。以下是浏览器执行HTML代码的详细过程：
一、网络请求与资源获取
浏览器首先根据URL发起HTTP请求，从服务器获取HTML文档。若HTML中包含外部资源链接（如CSS、JavaScript、图片等），浏览器会并行发起额外请求以下载这些资源。
1、浏览器解析URL，确定协议、域名和路径。
2、通过DNS查询将域名解析为IP地址。
立即学习“前端免费学习笔记（深入）”；
3、建立TCP连接，发送HTTP GET请求获取HTML文件。
4、接收响应后，检查状态码，确认HTML内容成功返回。
二、HTML解析与DOM树构建
浏览器使用HTML解析器逐字节读取接收到的HTML文本，并依据HTML5规范进行词法分析和语法分析，生成节点对象，最终构建出文档对象模型（DOM）树。
1、解析器识别起始标签、结束标签、属性、文本内容等标记。
2、遇到<script>标签且无defer或async属性时，暂停HTML解析，立即下载并执行JavaScript代码。</script>
3、将每个有效元素转换为DOM节点，并按嵌套关系组织为树状结构。
4、DOM树不包含CSS样式信息，仅反映HTML结构层次。
三、CSS解析与CSSOM树构建
浏览器同时或随后解析所有CSS资源（内联style、link引入的外部CSS、style标签内容），将其转化为层叠样式表对象模型（CSSOM）树，用于描述每个元素应具有的样式规则。
1、对每个CSS资源进行词法与语法解析，识别选择器、属性和值。
2、按优先级（内联 > ID > 类 > 元素）、来源（用户代理
3、将最终生效的样式规则映射到对应DOM节点，形成CSSOM树。
4、CSSOM是阻塞渲染的关键因素，未完成前浏览器不会进入布局阶段。
四、渲染树（Render Tree）合成
浏览器将DOM树与CSSOM树合并，剔除不可见节点（如head、display: none元素、script标签等），生成仅包含可视化内容的渲染树（Render Tree）。
1、遍历DOM树每个节点，查找其在CSSOM中匹配的样式规则。
2、跳过不参与渲染的节点，例如meta、title、script、comment及visibility: hidden但display: none以外的元素。
3、为每个可见节点创建对应的渲染对象（RenderObject），保存几何信息与样式属性。
4、渲染树不是DOM树的副本，而是其可视化子集的结构映射。
五、布局（Layout）与绘制（Paint）
浏览器基于渲染树计算每个节点在视口中的确切位置与尺寸（布局），再将各节点的视觉信息（颜色、边框、阴影等）转化为像素信息写入图形缓冲区（绘制）。
1、从根节点开始，递归计算每个渲染对象的宽度、高度、坐标等几何属性。
2、处理浮动、定位、Flexbox、Grid等布局模式，解决依赖关系。
3、将渲染树分层（Layer），为每个层生成绘制列表（Display List）。
4、调用图形API（如Skia）将绘制列表转为位图，输出至屏幕缓冲区。
