关于HTML解析、DOM树构建阶段的浏览器工作机制与CSS加载规则的疑问

前置认知验证 #

你梳理的基础流程逻辑完全正确：浏览器从服务器拉取到index.html的原始二进制字节流后，会优先读取文档内声明的字符编码（你示例代码里的<meta charset="UTF-8">），将原始字节转换为浏览器内部统一的UTF-16字符串序列，之后才会依次进入词法标记（Tokenization）、DOM节点生成、DOM树关联构建的流程，这个大框架不存在认知偏差。

核心疑问逐点解答 #

• 关于link标签的请求触发与流程阻塞边界
  当HTML解析器在解析过程中遇到带rel="stylesheet"的link标签时，会立刻发起对应的CSS资源获取请求。但这个过程并不会中断后续的HTML解析、节点生成流程：
  1. CSS请求由浏览器独立的网络模块异步发起，和HTML解析器的运行是并行的，HTML解析器不会停下来等待CSS响应返回
  2. CSS资源返回后，会由独立的CSS解析器流程完成词法拆分、规则匹配，最终生成CSSOM树，这个过程同样不会打断HTML解析器继续生成DOM节点
  3. 真正会触发阻塞的节点是「渲染树构建环节」：浏览器需要同时拿到完整的DOM树和CSSOM树，才能合并计算出页面上每个元素的最终样式、生成用于绘制的渲染树。如果此时CSSOM还没构建完成，浏览器会暂停渲染树生成、后续的布局计算与屏幕绘制流程，避免出现无样式内容闪烁（FOUC），但这个阶段DOM树的构建其实已经完成，不会因为CSS未就绪而中断节点生成。
• 关于CSS请求的具体触发时机
  CSS请求的触发节点，就是HTML解析器将link标签的Token转换为正式DOM节点的阶段（也就是你提到的HTML解析/Node创建阶段），既不是更早的纯Tokenization阶段，也不是DOM全量构建完成的阶段：
  Tokenization阶段只是把字符串拆解为无属性的语法标记，比如遇到<link只会生成一个“开始标签Token”，解析器此时还没读取标签的href、rel等属性，根本识别不出这是需要加载的样式表资源；只有当解析器把Token转换为带完整属性的DOM节点时，才会识别出这是样式表引用，进而触发网络请求。如果等到DOM全量构建完成后才发起请求，会导致长时间的内容闪烁，这也是浏览器刻意做的优化。
• 关于全流程的阻塞范围梳理
  不存在“CSS请求会阻塞整个HTML解析全流程”的情况，不同阶段的阻塞边界非常清晰：
  1. CSS网络加载阶段：完全不阻塞DOM解析，浏览器会并行处理网络请求、HTML字符串解析、DOM节点挂接
  2. CSSOM构建阶段：完全不阻塞DOM解析，两个解析流程并行推进，不会互相打断
  3. 渲染管线提交阶段：这是唯一的阻塞节点——如果是默认的同步样式表（不带异步加载标记、media属性匹配当前设备），浏览器会等待CSSOM构建完成后，才会推进到渲染树生成、布局、绘制环节。但这个阻塞只影响最终的屏幕渲染输出，不影响已经生成的DOM节点的可访问性，比如在CSS未加载完成时，通过JS查询DOM节点的接口是可以正常获取到对应元素的。

内容的提问来源于stack exchange，提问作者Thelostcause