1

我面临一个关于资源浏览器缓存的问题。有几个javascript文件，css文件不断变化，虽然时间不固定。

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

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

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

4

6 回答 6

4

只需将 ?[Some unique/random number] 放在 url 的末尾，每次都会获取文件。

例如

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

让它像

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

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

于 2012-04-16T09:39:38.823 回答
1

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

要实现上述目的，您可以配置 ETags。但这不会像缓存文件那样避免 http 请求访问服务器的成本。

更新

从你的评论中你可以做这样的事情

<?
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');?>" />
于 2012-04-16T09:52:47.910 回答
1

仅使用查询字符串来破坏缓存并不能 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/

于 2012-04-16T20:50:46.610 回答
0

将您的网站设计成客户端只需要获取外部 JavaScript 和 CSS 一次是一种很好的做法。

将外部资源设置为未来 1 年到期。为每个文件名附加一个版本号，因此不要使用“stylesheet.css”，而是使用“stylesheet-1.2.4.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)>
于 2012-04-16T09:41:35.507 回答
0

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

尝试使用 cookie 来检查。

于 2012-04-16T09:43:13.617 回答
0

如果您使用 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(); ?>" />
于 2012-04-16T10:21:45.283 回答