Chrome对CSS中url()引入子资源的缓存行为过于激进的问题

原因 #

Chrome对CSS内url()引入的子资源有特殊的缓存关联逻辑：当主CSS文件未触发重新验证时，Chrome会直接复用子资源的缓存副本，忽略子资源自身的cache-control: no-cache指令。它会优先以主CSS的缓存状态为依据，若浏览器判定主CSS无需重新校验，就会跳过对子资源的验证步骤，这和Firefox独立校验每个资源缓存策略的逻辑不同。

解决办法 #

• 给子资源添加版本标识：修改CSS中的资源路径为url(/path/to.png?v=xxx)（xxx为版本号或文件哈希值），资源更新时同步修改标识，强制浏览器重新请求资源。
• 强化子资源缓存指令：在服务器端给图片资源配置cache-control: no-cache, must-revalidate，通过must-revalidate明确要求Chrome必须验证缓存有效性后才能使用。
• 确保主CSS的缓存验证正常触发：检查主CSS文件的缓存策略配置，保证浏览器会定期对主CSS进行重新验证，带动Chrome校验其引用的子资源。
• 开发阶段强制刷新：用Ctrl+Shift+R（Windows/Linux）或Cmd+Shift+R（Mac）强制刷新页面，强制所有资源重新验证，仅适用于开发调试场景。

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