唯一真正非阻塞的CSS加载方式是rel="preload" as="style"配合onload动态注入；因其提前请求且不解析、不阻塞渲染，仅在onload后切换为stylesheet才生效，兼顾性能与兼容性。
现代浏览器中真正能实现「非阻塞」CSS加载的，只有 rel="preload" 配合 onload 动态注入这一条路径。其他方案要么仍会触发部分阻塞（如 media="print"），要么兼容性或可靠性不足（如 IE 的 onreadystatechange）。
为什么 rel="preload" as="style" 是唯一靠谱的选择
浏览器对 rel="preload" 的处理是：提前发起请求、不解析、不阻塞 HTML 解析和渲染。加上 as="style" 后，它才会被按样式表优先级调度；若只写 rel="preload" 不加 as，会被当作普通资源，失去预加载意义。
关键点在于：preload 本身不会应用样式——必须靠 onload 回调手动切换为 rel="stylesheet" 才生效。
- 必须监听
onload，不是onreadystatechange（已淘汰且不可靠） - 插入前建议检查是否已存在同 href 的
<link>，避免重复加载 - 不支持
preload的旧浏览器（如 IE）需降级回同步<link rel="stylesheet">或用fetch+createStyleSheet
media="print" 方案的实际表现与风险
这种写法：<link rel="stylesheet" href="lazy.css" media="print" onload="this.media='all'"> 确实能绕过初始阻塞，但问题不少：
立即学习“前端免费学习笔记（深入）”；
- 加载完成前页面可能短暂无样式（FOUC），尤其在弱网或高延迟下明显
- IE 完全不支持
onload，必须额外写 fallback 逻辑 - 如果用户正在打印预览，
media="print"会意外激活，导致样式提前应用 - 无法控制加载时机——它一进 HTML 就开始下载，哪怕 DOM 还没 ready
如何安全注入非关键 CSS（含 JS 示例）
推荐封装一个最小可用函数，兼顾存在性检查和降级：
function loadNonCriticalCSS(href) {
if (document.querySelector(`link[href="${href}"]`)) return;
const link = document.createElement("link");
link.rel = "preload";
link.as = "style";
link.href = href;
link.onload = () => {
link.rel = "stylesheet";
link.onload = null;
};
document.head.appendChild(link);
}
调用时直接传路径即可：loadNonCriticalCSS("/css/animations.css")。
注意：href 必须是完整路径或相对路径，不能带查询参数差异（否则去重失效）；若样式表含内联 @import，仍会触发额外阻塞，应尽量避免。
最容易被忽略的复杂点：关键 CSS 与非关键 CSS 的边界
很多人以为“动画、主题色、暗色模式”是非关键的，但实际要看首屏是否依赖它。例如：一个深色模式开关默认开启，且首屏按钮颜色由该 CSS 控制，那它就是关键的——内联比异步更稳妥。
真正适合异步的，是那些「用户滚动/交互后才出现」的样式，比如：模态框动画、评论区折叠展开、分页器 hover 效果。判断依据只有一个：首屏内容渲染完成前，这段 CSS 是否参与了任何元素的布局、颜色、尺寸计算？ 如果答案是否定的，才考虑异步加载。
