用 <link rel="prefetch"> 预取下一页 CSS 可行但需满足三个硬条件：静态写在初始 HTML <head> 中、同源、浏览器空闲；动态插入基本无效，不执行、不解析、不挂载样式。
直接说结论：用 <link rel="prefetch"> 预取下一页 CSS 是可行的，但必须满足三个硬条件——静态写在初始 HTML 的 <head> 里、同源、浏览器空闲；动态插入基本无效，且不执行、不解析、不挂载样式。
为什么动态插入 <link rel="prefetch" href="xxx.css"> 大概率没请求
浏览器只在 HTML 解析早期（document.readyState === 'interactive' 前）或 onload 后空闲时扫描 <link rel="prefetch"> 标签。客户端 JS 动态创建并 append 到 document.head 的 prefetch link，Chrome 115+ 有部分支持，Safari 完全忽略，绝大多数情况静默丢弃。
- 验证方法：打开 Chrome DevTools → Network 面板 → 勾选 “Prefetch” 类型过滤器 → 刷新页面，看有没有对应请求
- 常见假阳性：你看到了 Network 请求，但 Initiator 是
Other或script，说明不是 prefetch 触发的，而是其他 fetch 或 preload 混淆了 - 如果目标 CSS 已被强缓存（
Cache-Control: immutable），浏览器连网络请求都不发，直接从磁盘读，你以为“没生效”，其实是已命中
as 属性对 prefetch CSS 其实没用，但写错会降级失效
HTML 规范中 rel="prefetch" 不定义 as 属性，浏览器会按 URL 后缀或响应头 Content-Type 推断资源类型。但如果你写了 as="style" 或 as="stylesheet"，部分浏览器（如旧版 Edge）会直接忽略该标签；写成 as="fetch" 则可能被当成文档请求，导致 MIME 类型误判。
- 正确写法：
<link rel="prefetch" href="/assets/detail-page.8a2f.css">（无as） - 错误写法：
<link rel="prefetch" href="/detail.css" as="style">（多余且风险高） - 路径必须是根相对（
/assets/xxx）或绝对 URL；./detail.css在子路由下解析失败
prefetch CSS 后，用户跳转过去为什么还是白屏/闪动
因为 prefetch 只把 CSS 文件存进 HTTP 缓存，它不做任何后续动作：不插入 <link rel="stylesheet">、不触发 CSSOM 构建、不参与页面渲染流程。跳转后，新页面仍需自己发起 fetch、解析、注入、重排——这些步骤一个都没省。
立即学习“前端免费学习笔记（深入）”；
- 真正起效的表现是：跳转后 Network 面板中该 CSS 状态为
200 (from memory cache)或304，Initiator 显示prefetch - 如果你依赖 CSS 中的
@import、字体、图片等子资源，它们不会被自动 prefetch，得单独声明 - 别指望它解决组件重挂载、接口重拉、滚动位置丢失等问题——这些和资源缓存无关，得靠 SSR、路由守卫或状态持久化
更可控的替代方案：用 fetch() + Cache API 手动预存
当必须动态控制（比如鼠标 hover 商品卡片才预取详情页 CSS），<link rel="prefetch"> 不可靠，改用 fetch() 显式请求并存入 Cache API，兼容性好、可监听状态、能处理跨域（配合 CORS）。
const cacheName = 'css-prefetch';
const cssUrl = '/assets/detail-page.8a2f.css';
caches.open(cacheName).then(cache => {
fetch(cssUrl, { credentials: 'same-origin' })
.then(res => {
if (res.ok) return cache.put(cssUrl, res);
});
});
- 后续跳转时，可在新页面用
cache.match()检查是否存在，再手动注入<link rel="stylesheet"> - 比 prefetch 更重，但 100% 可控；注意清理过期缓存，避免占用 Storage
- 移动端低端 Android 浏览器对 prefetch 支持差，这个方案反而更稳
关键点始终没变：prefetch 不是魔法，它只是把文件悄悄塞进缓存。真正决定“下一页是否快”的，是那个页面自身的加载逻辑、资源组织方式和状态管理——别把性能瓶颈全押在一行 <link> 上。
