rel="stylesheet"会阻塞渲染且不支持预加载；预加载非关键css应使用rel="preload"配合js手动注入，或用media属性延迟加载。
rel=stylesheet 本身不支持预加载
浏览器遇到 <link rel="stylesheet"> 会立即开始下载并阻塞渲染，直到 CSSOM 构建完成。它没有“预加载但不应用”的能力——rel="stylesheet" 的语义就是“加载并解析应用”，不存在延迟生效或仅预热缓存的机制。
想预加载非关键 CSS，得换 rel 类型
真正能触发“只下载、不解析、不阻塞”的是 rel="preload"，但它必须配合手动注入逻辑才能转为样式表：
-
rel="preload"只负责提前拉取资源，浏览器不会自动将其当作 CSS 应用 - 必须用 JavaScript 在合适时机（比如 DOMContentLoaded 后）创建
<link rel="stylesheet">并设置href指向已预加载的 URL - 要确保预加载的
as="style"和后续rel="stylesheet"的 URL 完全一致（含查询参数、大小写），否则可能重复下载
示例：
<link rel="preload" href="/css/non-critical.css" as="style"><script>
// 等页面主要内容就绪后再加载
document.addEventListener('DOMContentLoaded', () => {
const link = document.createElement('link');
link.rel = 'stylesheet';
link.href = '/css/non-critical.css';
document.head.appendChild(link);
});
</script>
注意 preload 的兼容性与副作用
rel="preload" 在 Chrome 50+、Firefox 64+、Safari 11.1+ 支持，IE 完全不支持；使用时还要留意：
- 如果在
里写rel="preload"，但后续没手动注入，那资源就白下了（无报错，但浪费带宽） - 不能用
rel="preload"加载跨域 CSS，除非服务端返回Access-Control-Allow-Origin，否则注入后会因 CORS 被拒绝应用 - 预加载的 CSS 文件若体积大，可能挤占关键资源（如首屏 HTML、关键 JS）的带宽，反而拖慢首屏渲染
更稳妥的替代方案：媒体查询 + 低优先级加载
对非关键 CSS，更简单可靠的做法是用 media 属性让它初始不匹配，避免阻塞：
<link rel="stylesheet" href="/css/print.css" media="print"><link rel="stylesheet" href="/css/theme.css" media="screen and (min-width: 768px)">
只要媒体条件不满足，浏览器会下载（部分浏览器）或延迟下载（多数现代浏览器），且完全不阻塞渲染。等 JS 检测到条件满足（如窗口 resize、用户交互）再切换 media 值即可激活——这比 preload + JS 注入更轻量、更可控，也无需担心 CORS 或缓存失效问题。
真正容易被忽略的是：预加载非关键 CSS 的收益常被高估，而其引入的手动控制链（preload → JS 判断 → 动态注入 → 错误兜底）反而增加了出错面和维护成本。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
