Question

我遇到了有关浏览器缓存资源的问题。有一些javascript文件，css文件不断更改，虽然时间不固定。

当我在服务器上更新这些文件时，不会加载新文件，并且需要清除浏览器缓存以加载新文件。

是否有方法，服务器或浏览器设置告诉浏览器，在加载资源时，如果服务器文件中有任何更改，则从服务器加载，否则使用存储在浏览器缓存中的现有文件。

我正在寻找一个需要基于浏览器/基于服务器的配置的解决方案，而不是我每次进行更新时都需要手动执行的操作

Answer 1

在url的末尾添加？[一些唯一/随机数]，每次都会得到文件。

例如

http://abc.com/css/mystyles.css

使其像

http://abc.com/css/mystyles.css?123163

时间刻度可能是最佳选择之一，而不是随机数

Answer 2

是否有方法，服务器或浏览器设置告诉浏览器何时加载资源，如果服务器文件中有任何更改，请加载从服务器，否则使用存储在浏览器中的现有文件高速缓存中。

要实现上述目标，您可以Configure ETags。但这不会避免http请求作为缓存文件到达服务器的成本。

<强>更新

从your comment你可以做这样的事情

<?
function get_filename_with_version($fname)
{
    return "?filename=" . $fname; // Generate the hash of the content and append it here as a query string
}
?>

<link rel="stylesheet" href="resrc.php<?php echo get_filename_with_version('a.css');?>" />

Answer 3

仅使用查询字符串来缓存缓存不是100％保证：例如，某些代理服务器将删除从您的html链接的文件上的任何查询字符串。

更好的方法是修改uri或文件名。我在apache中使用重写规则，以便类似：

my.app.com/12345/js/file.js

指示：

的htdocs / JS / file.js

在文件系统中。

我的应用程序然后根据源代码控制更新修订版号，但您可以在html中手动执行此操作。使用此解决方案并设置远期到期（http 1.0）和max-age（http 1.1）标头，我可以通过新的uri获得永久客户端缓存的好处，并且文件的开发简易性位于同一位置文件系统。

Steve Souders关于未来的标题：

http://www.stevesouders.com/blog/2008/08/23/revving-filenames-dont-use-querystring/

Answer 4

设计您的网站是一个很好的做法，这样客户端只需要获取外部JavaScript和CSS一次。

将外部资源设置为将来过期1年。为每个文件名附加一个版本号，因此使用“stylesheet-1.2.4.css”代替“stylesheet.css”，然后当您想要更新客户端的CSS时，增加版本号。

增加版本号会强制客户端下载更新的文件，因为它被视为完全独立的资源。

如果您不想要此解决方案，请执行以下操作：

<link rel="stylesheet" type="text/css" href="/stylesheet.css?foo=<?php echo rand(); ?>"/>

或

 <link rel="stylesheet" type="text/css" href="/stylesheet.css?foo="Math.floor(Math.random()*1000)>

Answer 5

是否有方法，服务器或浏览器设置告诉浏览器，在加载资源时，如果服务器文件中有任何更改，则从服务器加载，否则使用存储在浏览器缓存中的现有文件。

尝试使用cookie来检查。

Answer 6

如果您使用PHP，则可以使用此解决方案：

//Just add the timestamp as parameter to your filename.
<link rel="stylesheet" type="text/css" href="css/stylesheet.css?<?php echo time(); ?> />
<script type="text/javascript" src="scripts/script.js?<?php echo time(); ?>"></script>
<img src="image.png?<?php echo time(); ?>" />

更改时加载Web资源[js，css，images]的最佳方法是什么？

6 个答案: