HTML页面加载是流式解析与多线程协作过程：DOM和CSSOM必须同时就绪才能构建渲染树；script（无async/defer）会阻塞HTML解析，CSS不阻塞解析但阻塞渲染和DOMContentLoaded。
HTML 页面加载不是“下载完就渲染”，而是解析、构建、协作的多线程过程；DOM 和 CSSOM 必须都就绪，浏览器才能生成渲染树——缺一不可。
HTML 解析是流式、非阻塞的，但 script 会打断它
浏览器一边接收 HTML 字节流，一边逐行解析并构建 DOM 树。遇到 或 ，会发起 CSS 请求，但**不暂停 HTML 解析**；而遇到 <script></script>（无 async 或 defer）时，解析立刻暂停，直到 JS 下载、执行完毕才继续。
- 常见错误现象：把
<script src="app.js"></script>放在顶部，导致后续 HTML 元素迟迟无法进入 DOM，首屏白屏时间拉长 - 真实场景：SPA 中常依赖 JS 初始化路由或数据，但不应牺牲 HTML 结构的早期可构建性
- 参数差异：
async脚本下载不阻塞解析，但执行时机不确定；defer等待 HTML 解析完成后再按顺序执行，更可控
CSS 加载不阻塞 HTML 解析，但会阻塞渲染和 DOMContentLoaded
CSSOM 构建必须完成，浏览器才敢开始布局（Layout）和绘制（Paint）。即使 DOM 已解析完毕，只要关键 CSS（如 在 中）还没解析完，DOMContentLoaded 就不会触发，页面也不会真正渲染。
- 容易踩的坑：用
@import在 CSS 文件中引入其他样式表——它会串行加载，且延迟CSSOM构建，比多个更慢 - 性能影响：外部 CSS 文件体积大、RTT 高时，用户看到空白时间显著增加；内联关键 CSS 可缓解首屏阻塞
- 兼容性注意：
media属性值如print或(max-width: 768px)的不会阻塞初始渲染，浏览器知道它不参与当前视口样式计算
DOM 和 CSSOM 协作生成渲染树（Render Tree），不是简单叠加
渲染树 ≠ DOM 树 + CSSOM 树。浏览器会过滤掉 display: none 的节点、伪元素（除非显式创建）、head 中的不可见元素，并合并匹配的样式规则。这个过程发生在内存中，不暴露给 JS。
- 常见错误现象：JS 修改了某个元素的
className，但页面没重绘——可能因为对应 CSS 规则未加载/解析，CSSOM还没更新 - 使用场景：服务端渲染（SSR）需确保 HTML 输出时，关键样式已内联或预加载，否则客户端首次渲染仍会闪烁
- 调试建议：Chrome DevTools 的
Rendering面板开启 “Paint Flashing” 可观察重绘区域；Layers面板查看哪些节点被提升为合成层——这和渲染树结构强相关
最易被忽略的一点：CSS 文件哪怕只差一个字节没收全，CSSOM 就算未完成，整个渲染流程就会卡住；而 HTML 解析哪怕中断（如网络断开），已解析的部分 DOM 仍存在——但用户看不到，因为没有样式支撑的 DOM 是不可见的。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
