rel="prefetch"无法缓存css中的background-image，因其只处理href直接指向的独立资源，不解析css路径；可行方案是preload或内联图片。
rel="prefetch" 不能静默缓存网页背景图——它根本不处理 CSS 中的 background-image，也不会触发任何图片加载逻辑。
为什么 background-image 无法被 prefetch 缓存
浏览器对 rel="prefetch" 的资源类型校验非常严格：as 属性只接受有限值（script、style、document、font、image 等），但即使写了 as="image"，它也只对直接通过 href 指向的独立图片文件生效，而不会解析或执行 CSS 文件里的 background-image: url(...) 路径。
更关键的是：CSS 文件本身若未被 prefetch（且 as="style"），其中声明的图片路径就完全不在浏览器视野内。你没法靠一条 <link rel="prefetch" href="/bg.jpg" as="image"> 让某个 CSS 类的 background-image 提前进缓存——除非你知道这张图的确切 URL，并且它在后续页面中是作为独立 <img src> 或明确引用的资源出现。
- 写了
<link rel="prefetch" href="/assets/bg-hero.png" as="image">，但该图只出现在.hero { background-image: url(./bg-hero.png); }里 → 不生效 - CSS 文件用了相对路径（如
url(../images/bg.png)），而 prefetch 写的是根路径/images/bg.png→ 路径不一致，缓存键不同，复用失败 - 构建后 CSS 中的图片路径被哈希重写（如
bg-abc123.png），但 prefetch 还指向旧名 → 404 或缓存未命中
真正能提前缓存背景图的可行方式
如果这张背景图确定会在下一步页面中作为独立资源被使用（比如第二步页有个 <img src="/assets/bg-hero.png">），那可以 prefetch 它；但如果它只以 background-image 形式存在，唯一可靠路径是让它成为当前页关键资源的一部分：
- 用
<link rel="preload" href="/assets/bg-hero.png" as="image" fetchpriority="high">—— 放在靠前位置，强制提前拉取并进内存缓存（注意：不是 HTTP 缓存） - 把图内联进 CSS：用 base64 或
url(data:image/png;base64,...)→ 彻底规避请求，但仅适用于小图（ - 服务端开启强缓存（
Cache-Control: public, max-age=31536000），让后续页面访问时自然复用 —— 这才是 background-image 真正依赖的机制
常见错误现象与验证方法
你以为 prefetch 生效了，但 Network 面板看不到请求？大概率是因为：
- Chrome DevTools 默认不显示 prefetch 请求 → 必须手动勾选 Network 面板右上角的
prefetch过滤器 - 页面还没触发
onload（比如 JS 校验阻塞、动画未结束）→ prefetch 始终不发起 - 目标图片返回
Cache-Control: no-cache或max-age=0→ 浏览器不存，下次仍要重新请求 - 写了
as="fetch"或漏写as→ 降级为低优先级请求，甚至被丢弃
验证是否真进了缓存：跳转到下一页后，打开 Network 面板，找到该图片请求，看 Size 列是否为 from memory cache 或 from disk cache，且 Initiator 显示为 Prefetch。
复杂点在于：prefetch 对 background-image 是“视而不见”的。你得先确认这张图是不是真的以独立 URL 形式被后续页面消费；如果不是，所有 prefetch 尝试都只是往空缓存里扔了个寂寞。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
