Question

在推出新的网站更改或Web应用程序更改时，有时浏览器会在您导航到网站时加载旧的javascript或图像文件。通常需要手动刷新页面以便浏览器加载新更新的文件。

如何确保在更新后，用户在第一次加载页面时会收到最新的文件，而不必手动刷新以清除任何缓存的文件。有没有一种非常可靠的方法来通过发送过期标题或上次修改过来？

Answer 1

我假设你有一个构建脚本或一堆任务脚本来帮助你重复更新网站/应用程序。由于您使用javascript标记标记了您的问题，我将为您提供基于javascript的解决方案。

您可以使用（或使用）任务运行器，例如Grunt或Glup or any other，然后运行缓存清除{{ 3}}将更新您的网址：

<script src="testing.js"></src>
<link href="testing.css" rel="stylesheet">
<img src="testing.png">

到此：

<script src="testing.js?v=123456"></src>
<link href="testing.css?v=123456" rel="stylesheet">
<img src="testing.png?v=123456">

这会阻止浏览器重复使用您的资源。

Answer 2

我只知道如何做到这一点 - 在文件URL的末尾添加一些参数。例如。你有image picture.png而不是像这样在

<img src="path/to/picture.png">

你必须这样写：

<img src="path/to/picture.png?specific_parameter_123">

因此，在＆＃39;？＆＃39;之后更改此参数将强制浏览器再次加载您的图片（或其他内容），因为对于浏览器，确切的路径已更改。

您可以通过更改参数手动执行此操作（或者甚至每次通过JS随机生成）或使用Grunt和grunt-cache-breaker之类的内容，它将根据md5哈希生成唯一的文件URL。因此，一旦文件被更改，网址也将被更改。

也可以在服务器端执行相同操作。例如。如果你使用PHP，你可以尝试这样的事情：hash css and js files to break cache. Is it slow?。

有关查询字符串here的更多信息。

Answer 3

我在一些项目中使用了哈希。该哈希（md5或其他快速）是根据使用的LESS / SASS文件或JS模块的文件内容计算的。每次更改某些内容时，例如在LESS源代码中，编译的CSS文件将具有新的文件名。

您应该使用较长的缓存时间启用客户端缓存。浏览器将在本地存储CSS文件。它只在实时部署后加载一个新的CSS文件。

Answer 4

检查系统可用的数据。