能，但需满足前提：仅预下载CSS文件为二进制缓存，不解析、不执行；必须路径准确（含哈希）、MIME正确、非当前页已用资源；不支持as属性；动态插入在多数浏览器中无效。
rel="prefetch" 能预加载 CSS 吗？能，但有前提
可以，rel="prefetch" 支持预获取任意静态资源，包括 .css 文件。但浏览器只把它当普通二进制 blob 缓存，不会提前解析、不会触发样式计算、也不会影响渲染流程。它只是“悄悄下好，等你真要时再用”。
关键点在于：
- 必须是下一个页面真正会用到的 CSS（比如 Detail 页面的
Detail.chunk.css），而不是当前页已有的或已内联的样式 - URL 必须准确对应构建产物路径，且带哈希（如
/assets/Detail.8f3e2.css），否则缓存可能失效或命中错误版本 - 不支持
as属性，所以不能像preload那样提示浏览器“这是 CSS，请提前解码”
为什么直接在 head 里写 可能无效
静态写入 HTML 是最稳妥的方式，但常见失效场景包括：
- 该 CSS 文件被 Webpack/Vite 打包进 JS chunk 中（即 CSS in JS 或 mini-css-extract-plugin 没单独抽离），导致实际不存在独立
.cssURL - href 指向的是未哈希的开发环境路径（如
Detail.css），上线后 404 - 服务端没配好 MIME 类型，返回的
Content-Type不是text/css，浏览器静默丢弃（用curl -I可验证） - 在 SPA 客户端路由中动态插入
<link rel="prefetch">—— 多数浏览器（尤其是 Safari）根本不处理 document.readyState === 'complete' 后插入的 prefetch link
Chrome DevTools 里怎么确认 prefetch 生效了
打开 Network 面板，筛选 Initiator 列为 Other，并检查以下三点：
立即学习“前端免费学习笔记（深入）”；
- 请求状态码是
200（不是 304、404 或 CORS error） -
Priority列显示为Low（若显示High或Medium，说明被当成 preload 或普通 fetch，配置出错） - 请求时间明显晚于首屏资源（如
app.js、critical.css），通常在主线程空闲后才发起
更可控的替代方案：Cache API + fetch()
如果必须客户端动态控制（比如鼠标移入才触发），别依赖动态插入 link[rel=prefetch]。改用：
-
fetch('/assets/Detail.8f3e2.css').then(r => r.text()).then(css => caches.open('prefetch').then(c => c.put('/assets/Detail.8f3e2.css', new Response(css, { headers: { 'Content-Type': 'text/css' } })))); - 下次导航到详情页时，用
document.styleSheets或insertRule手动注入，或让新页面的link标签自然命中 Cache Storage
这个方式兼容性更好，可监听失败，还能配合 Service Worker 做版本校验。但注意：CSS 注入时机需避开 FOUC，建议在新页面 DOMContentLoaded 后、load 前完成。
prefetch 的本质是“赌用户下一步动作”，不是万能加速器；真正容易被忽略的，是它对连接池的隐性占用——哪怕 Priority 是 Low，它仍会占一个 TCP 连接，而移动端高并发下这点开销可能反拖慢首屏。
