最轻量、零JS依赖、兼容性最好的延迟引入方式是用media属性配合onload激活，但必须确保media值初始不匹配，否则仍会阻塞；media="print"等不匹配表达式使浏览器标记CSS为非关键，跳过阻塞下载。
直接结论：用 media 属性配合 onload 激活，是最轻量、零 JS 依赖、兼容性最好的延迟引入方式；但必须确保 media 值在初始渲染时**不匹配**，否则照样阻塞。
为什么 media="print" 能绕过阻塞
浏览器对 <link rel="stylesheet"> 的阻塞行为，只发生在媒体查询**当前匹配**时。把 media 设为 "print"、"screen and (min-width: 9999px)" 或 "(prefers-reduced-motion: reduce)"（而用户未开启该偏好），浏览器会立刻标记该 CSS 为“非关键”，跳过下载或推迟到空闲时加载，HTML 解析和 DOM 构建完全不受影响。
- 不要用
media="all"或media="screen"——它们默认匹配，等于没做任何延迟 -
media="(min-width: 1024px)"只在桌面设备生效，但若你首屏在手机上也需要这部分样式，就会漏掉，导致布局错乱 - IE 不支持
onload，需 fallback 到onreadystatechange或改用动态插入
rel="preload" + onload 注入的实操要点
当非关键 CSS 必须在用户交互前就绪（比如弹窗、下拉菜单），仅靠 media 延迟可能加载太晚，这时要用 rel="preload" 主动拉取，再手动注入为样式表。
- 必须写
as="style"，否则浏览器不会按高优先级处理，甚至可能降级为fetch级别 - 注入逻辑要放在
DOMContentLoaded后立即执行，不能等window.onload，否则用户已开始操作 - Safari 对
<link>的onload支持不稳定，建议加兜底：const link = document.createElement('link'); link.rel = 'stylesheet'; link.href = 'non-critical.css'; document.head.appendChild(link);
哪些 CSS 真的“可延迟”？别凭感觉判断
延迟不是技术问题，而是语义和用户路径问题。一个按钮的 :hover 样式可以等到用户第一次悬停前再加载；但首屏导航栏如果缺了 display: flex，整个结构就塌了——哪怕它只占 2KB。
立即学习“前端免费学习笔记（深入）”；
- 用 Chrome DevTools 的
Coverage面板看真实 CSS 使用率，红色部分就是可删或可延迟的 - 用 Lighthouse 的
Eliminate render-blocking resources报告反向验证：哪些 CSS 被标记为阻塞，但实际首屏根本没用到 - 禁用
@import—— 它在 CSS 文件内触发串行请求，比外链更慢，且无法被media或preload控制
真正容易被忽略的点是：延迟加载后不验证是否生效。样式补丁式闪烁、伪类失效、媒体查询错位，往往不是加载失败，而是激活时机或匹配条件没对齐。上线前务必在弱网模拟下滚动+悬停+切换主题，看样式是否“刚好来得及”。
