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

What is the best way to load web resources [js, css, images] when changed

本文关键字：images css 最佳 是什么 方法 js 加载 Web 资源      更新时间：2023-09-26

我面临着有关浏览器缓存资源的问题。有一些javascript文件，css文件不断变化，尽管时间不固定。

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

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

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

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

例如

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

让它像

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

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

仅使用查询字符串来破坏缓存并不能 100% 保证：例如，某些代理服务器会剥离从 HTML 链接的文件上的任何查询字符串。

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

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

定向到：

htdocs/js/file.js

在文件系统中。

然后，我的应用会根据源代码管理更新修订版号，但你可以在 html 中手动执行此操作。 使用此解决方案并设置远未来的过期 （http 1.0） 和最大年龄 （http 1.1） 标头，我可以通过新 uri 获得永久客户端缓存的好处，以及文件在文件系统上同一位置的开发便利性。

史蒂夫·苏德斯谈遥远未来的头球：

http://www.stevesouders.com/blog/2008/08/23/revving-文件名-不要使用-查询字符串/

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

要实现上述目标，您可以配置 ETag。但这并不能避免像缓存文件那样 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');?>" />

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

尝试使用 cookie 来检查这一点。

如果您使用 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(); ?>" />
设计

您的网站是一种很好的做法，以便客户端只需要获取一次外部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)>
相关文章：