非首屏CSS延迟加载能避免阻塞关键渲染路径：浏览器解析HTML时遇<link rel="stylesheet">会暂停DOM构建直至CSSOM完成，而media="print"+onload方案可绕过阻塞，待DOM就绪后再激活样式，无需JS依赖且兼容性好。
非首屏CSS延迟加载能避免阻塞关键渲染路径
浏览器解析 HTML 时，遇到 <link rel="stylesheet"> 会立即暂停 DOM 构建，直到 CSSOM 完成。哪怕一个 300KB 的 theme.css 卡在 CDN 上，首屏内容就一直白屏——这不是后端慢，是渲染被你写的这行代码锁死了。
延迟加载不是“不加载”，而是让非首屏样式（比如暗色模式、打印样式、折叠面板动画）绕过这个阻塞点，在 DOM 就绪后再加载，确保用户 1 秒内看到可交互内容。
media="print" + onload 是最轻量可靠的延迟方案
用 @import 或直接写 media="screen" 的 <link> 都会阻塞；而 media="print" 让浏览器把它当“非关键资源”跳过阻塞，等 onload 触发再切回 media="all"，整个过程不打断 HTML 解析。
实操要点：
立即学习“前端免费学习笔记（深入）”；
- 必须配对使用：
<link rel="stylesheet" href="non-critical.css" media="print" onload="this.media='all'"> - 不能省略
onload中的this.media='all'，否则样式永远不会生效 - 不要加
defer或async——它们对<link>无效 - 若启用 CSP，需为该
<link>加nonce，否则可能被拦截
为什么不用 preload + onload 动态插入
<link rel="preload" as="style"> 确实能提前拉取，但后续仍需 JS 动态创建 <link> 并插入 DOM，多一步操作就多一个失败点：JS 执行时机不准、插入位置错误、重复插入都可能导致 FOUC 或样式错乱。
相比之下，media="print" + onload 是纯 HTML/CSS 方案，无 JS 依赖，兼容性更好（Chrome 50+、Firefox 50+、Safari 12.1+），且已被 Chrome 团队在 Lighthouse 文档中列为推荐实践。
大型项目里 @import 会放大问题而非缓解
在 main.css 里写 @import "header.css"; 看似“组织清晰”，实际导致：main.css 必须完全下载解析完，header.css 才开始请求；无法并行；构建工具（Webpack/Vite）根本看不到它，没法提取关键 CSS、tree-shake 或加 scope。
更麻烦的是，嵌套两级 @import 后，首屏 CSS 加载延迟常超 400ms，且 DevTools 的 Coverage 面板压根统计不到这些文件里的未用规则。
所以真正要做的，不是“怎么优雅地 import”，而是把非首屏样式彻底移出关键链路——用延迟加载，而不是想办法让它“快一点”。
最容易被忽略的一点：延迟加载后，记得删掉那些本就不该出现在首屏的类名（比如 .dark-mode、.slide-in），否则即使 CSS 晚加载，浏览器仍会在 CSSOM 构建阶段扫描并匹配它们，徒增计算开销。
