强制浏览器重新读取缓存的图像

Question

.button {         background：url（../ Images / button.png）;     }

问题：由于性能原因，所有静态内容都有过期标头，并由浏览器缓存。当图像更改时，用户必须刷新缓存（IE中的Ctrl + F5）。我想要缓存图像，但必要时必须自动重新加载。

问题：下一步是'有效'？

.button {
    background: url(../Images/button.png?v=1234);
}

其中v = 1234是我网站的版本。我不知道在CSS中编写这样的东西是否100％有效，我确实希望浏览器在版本相同时仍然​​缓存图像。是否所有现代浏览器都使用URL参数部分正确缓存数据？

感谢。

Answer 1

这看起来对我很好，它在现代浏览器中的CSS工作正常 - 浏览器会查看图像的地址（包括?v=1234），看看它没有缓存，并且发送新的请求。

Answer 2

这在High Performance Web Sites的规则3中讨论：“添加过期或缓存控制标题”。建议的方法之一是版本文件而不是网站。

来自accompanying blog：

  

请记住，如果您使用远期的Expires标头，则必须在组件更改时更改组件的文件名。在Yahoo!我们经常将此步骤作为构建过程的一部分：版本号嵌入在组件的文件名中，例如，yahoo_2.0.6.js。