如何让CSS background-url属性加载的图片被浏览器正常缓存

按照常规浏览器缓存逻辑，只要静态资源的响应配置了正确的缓存相关响应头、且同一资源的请求URL保持一致，浏览器就会自动缓存已拉取的图片及其他各类静态资源。

但实际开发中会遇到一类特殊现象：使用background-url加载背景图片时，对应图片请求会被自动添加cache-control: no-cache和pragma: no-cache两个请求头，直接导致浏览器无法缓存该类图片资源。
可以通过简易复现页验证该现象：打开测试页面后，在浏览器开发者工具的网络面板中筛选图片类请求，即可观测到上述异常请求头。

不存在background-url加载的资源默认无法被缓存的浏览器原生行为，上述异常基本都来自配置错误或者外部拦截逻辑，和CSS属性本身无关。

• 优先检查开发者工具配置
  90%以上的复现场景都是误开了开发者工具的缓存禁用开关：打开开发者工具「网络」面板，检查顶部的*禁用缓存（Disable cache）*选项是否被勾选。该选项开启时，所有页面发起的资源请求（无论通过img标签、CSS背景、脚本加载）都会被自动加上no-cache相关请求头，完全绕过浏览器缓存。取消勾选后刷新页面，CSS背景图请求就会恢复正常的缓存逻辑。
• 校验图片资源的服务端响应头配置
  排除开发者工具影响后，确认图片资源的响应头符合缓存规则：
  • 强缓存场景配置合理的Cache-Control，比如Cache-Control: public, max-age=31536000, immutable
  • 协商缓存场景正确返回Last-Modified或ETag标识，保证二次请求时服务端可正常返回304响应
  • 确保响应头没有携带Cache-Control: no-store这类强制禁止缓存的配置
• 排查全局请求拦截逻辑
  如果以上配置都正常，逐一排查可能改写请求的逻辑：
  • 检查页面是否注册了Service Worker拦截图片请求，手动追加了禁止缓存的请求头
  • 检查是否有代理脚本、监控SDK全局改写了资源加载逻辑
  • 排查是否有浏览器插件对页面请求做了拦截改写

只要保证资源URL固定、请求头无强制禁用缓存字段、服务端缓存响应头配置正确，CSS background-url 加载的背景图和其他静态资源的缓存逻辑完全一致，不存在特殊限制。

内容的提问来源于stack exchange，提问作者Don P