浏览器遇到<link rel="stylesheet">时并不暂停HTML解析，而是将后续DOM节点标记为“未激活”，待CSSOM构建完成才参与样式计算与渲染，因此首屏内容需等待CSS加载解析完毕才能显示。
为什么会让DOM解析“卡住”
浏览器遇到 <link rel="stylesheet"> 时，并不真正暂停 HTML 解析，而是把后续 DOM 节点标记为“未激活”——它们虽被创建，但不参与样式计算、不进入渲染树，直到对应 CSSOM 构建完成。这意味着：<body> 开头的按钮、标题等元素，即使 HTML 已写到那儿，也得等 CSS 文件下载并解析完才能显示。
常见错误现象：<link href="main.css"> 放在 <head> 顶部，而 main.css 体积达 300KB 且含嵌套 @import，首屏空白超过 1.2s（3G 网络实测）
- Firefox 会直接阻塞所有脚本执行；WebKit（Chrome/Safari）按需阻塞，但只要 JS 访问了
offsetHeight或getComputedStyle()，照样卡住 -
media="print"或media="(max-width: 768px)"的<link>不参与阻塞链，可安全用于非首屏样式 - 绝对禁用
@import：它强制串行加载，A.css → B.css → C.css 会拉长关键路径，且多数构建工具默认不处理其依赖
内联关键CSS不是“把所有CSS粘进去”
内联 <style> 确实绕过网络请求，但体积失控反而拖慢 HTML 解析本身。实测表明：当内联样式超过 2KB，V8 解析器在移动设备上解析耗时呈非线性增长。
使用场景：仅提取首屏可见区域（viewport 内）必需的规则，如导航栏、主标题、首屏按钮的 font-size、color、display、margin 等基础声明
立即学习“前端免费学习笔记（深入）”；
- 工具推荐：
criticalCLI 或 Puppeteer 脚本提取，但必须结合真实设备 Performance 面板验证——模拟器常低估 Layout 时间 - 避免内联
@font-face、@keyframes、复杂选择器（如div:nth-child(3n+1) .item > p:last-of-type），这些会显著延长 CSSOM 构建 - 内联后记得移除对应外部文件中的重复规则，否则浏览器仍要解析两遍
defer 脚本为何比 async 更适合控制 DOM/CSSOM 协作节奏
async 脚本下载不阻塞，但执行时机不可控；defer 则保证在 DOM 构建完成后、DOMContentLoaded 前按顺序执行——这对依赖 DOM 结构又需等待 CSSOM 就绪的逻辑（如初始化 UI 组件）至关重要。
典型错误：<script src="vue.js" defer> + <script src="app.js" defer>，看似合理，但如果 app.js 中调用了 document.querySelector('.hero') 且该元素样式依赖尚未就绪的 CSSOM，仍可能读到错误尺寸或触发强制同步布局
- 真正安全的做法：在
defer脚本中监听document.addEventListener('DOMContentLoaded', ...)，而非直接执行；更进一步，用requestIdleCallback延迟到空闲时段 - 不要在
defer脚本里调用getComputedStyle(el).width—— 此时 CSSOM 可能刚就绪但 Layout 尚未触发，结果为auto或默认值 - 若必须读取样式，改用
el.offsetWidth并确保该元素已存在于 DOM 且无display: none
本地大 HTML 文件中 CSS 加载慢的真实瓶颈在哪
对本地双击打开的 20MB HTML 文件（如离线文档、报表导出页），外部 CSS 的性能劣势并非来自网络延迟，而是文件系统 I/O 和解析器事务开销：每次 <link> 都触发一次独立的磁盘寻址 + 读取 + 字符串解析流程，20,000 条记录配一个外部样式表，等于多做 20,000 次小文件操作。
此时内联样式快不是因为“省了请求”，而是消除了重复的 I/O 上下文切换
- 但别全局替换：内联所有样式会让 HTML 文件体积暴增，影响 gzip 压缩率（CSS 重复字符串无法跨元素复用）
- 折中方案：用构建脚本将高频共用样式（如
.table-cell、.badge）内联，其余按模块拆成<link media="(min-width: 0px)">占位，JS 动态切换 - 注意 Safari 对超长
<style>块的解析有隐式限制，超过 64KB 可能截断，务必实测
最难的从来不是知道该内联哪段 CSS，而是确认“首屏”边界——它随 DPR、字体加载策略、甚至用户滚动速度实时变化。靠静态分析不够，必须用真实设备 Performance 面板，盯着 Layout 和 Recalculate Style 的时间戳交叉验证。
