外部CSS阻塞渲染树生成但不阻塞DOM解析；白屏因等待CSSOM完成；media="print"+onload是最轻量异步方案，需严格按规范书写。
外部 CSS 一定会阻塞渲染树生成，但不会阻塞 DOM 树解析——这是关键区分点。白屏不是因为 HTML 没解析完，而是浏览器死等 CSSOM 构建完成，才肯合并 DOM + CSSOM 生成渲染树。
为什么不卡DOM解析却卡渲染
HTML 解析器遇到 <link rel="stylesheet"> 时，会发起并行下载，继续往下解析 DOM；但渲染引擎在构建渲染树前，必须拿到完整的 CSSOM。哪怕只缺一个 @import 或网络延迟的 CSS 文件，Render Tree 就卡住不动，页面保持空白或仅显示未样式化内容。
常见错误现象包括：
- DevTools 中
Layout阶段长时间不触发 -
DOMContentLoaded虽已触发，页面仍白屏 - Lighthouse 报告 “Eliminate render-blocking resources”
media="print"+onload 是最轻量可靠的异步方案
它利用浏览器对非匹配媒体类型的懒处理机制：资源照常下载，但不参与初始 CSSOM 构建，也完全不依赖 JS 执行时机。
立即学习“前端免费学习笔记（深入）”；
实操要点：
- 写法必须是
<link rel="stylesheet" href="non-critical.css" media="print" onload="this.media='all'; this.onload=null;"> -
onload中必须立刻执行this.media='all'，否则样式永不生效 - 必须加
this.onload=null，否则 Safari 可能重复触发 - 别用
media="(min-width: 9999px)"这类假条件——2026 年起主流浏览器已拒绝识别 - IE 不支持
onload，需 fallback 到onreadystatechange（loadCSS库已内置）
rel="preload"+onload 适合预加载交互后立即用的 CSS
比如深色主题 dark.css、弹窗组件 modal.css，你想提前下载但不让它拖慢 LCP。
注意边界问题：
- 必须写
as="style"，否则 Chrome/Firefox 不提升优先级，甚至忽略预加载 -
href值要和最终<link rel="stylesheet">完全一致（含 query 参数），否则缓存不复用 - 回调中必须立刻执行
this.rel='stylesheet'，不能靠fetch()后插入<style>—— 后者不触发 CSSOM 重建 - 务必配
<noscript><link rel="stylesheet" href="dark.css"></noscript>，覆盖禁 JS 场景和 Safari 11.1 以下
真正容易被忽略的细节
非关键 CSS 里如果含 @font-face、大图背景或嵌套 @import，这些子资源会在样式挂载后才拉取，照样挤占首屏带宽；动态创建 <link> 时，onload 在 Firefox 69 之前和部分 Android WebView 中不可靠；media="print" 方案虽简单，但若误删 onload 或漏写 this.onload=null，就退化成普通阻塞加载。
