HTML加载过程：结构与CSS协同解析详解

HTML页面加载并非简单的“下载即渲染”，而是一个DOM与CSSOM协同构建渲染树的精密多线程过程：HTML流式解析本身不阻塞，但同步脚本会立即中断解析，拖慢首屏；CSS虽不阻塞HTML解析，却严格阻塞渲染和DOMContentLoaded事件——哪怕一个字节未收全，整个页面就卡在白屏状态；渲染树更非DOM与CSSOM的简单叠加，而是经过过滤、合并与样式匹配的智能产物。理解这一机制，才能真正规避白屏、闪烁与重绘失效等常见陷阱，从根源优化前端性能。

HTML 页面加载不是“下载完就渲染”，而是解析、构建、协作的多线程过程；DOM 和 CSSOM 必须都就绪，浏览器才能生成渲染树——缺一不可。

HTML 解析是流式、非阻塞的，但 script 会打断它

浏览器一边接收 HTML 字节流，一边逐行解析并构建 DOM 树。遇到 或