如何强制客户端刷新 JavaScript 文件？

Question

我们目前正在进行私人测试版，因此仍在进行相当快速的更改，尽管显然随着使用量开始增加，我们将放慢这一过程。 话虽如此，我们遇到的一个问题是，在我们使用新的 JavaScript 文件推出更新后，客户端浏览器仍然使用该文件的缓存版本并且他们看不到更新。 显然，在支持电话中，我们可以简单地通知他们执行ctrl F5刷新以确保他们从服务器获取最新文件，但最好在此之前处理此问题。

我们目前的想法是简单地将版本号附加到 JavaScript 文件的名称上，然后在进行更改时，增加脚本上的版本并更新所有引用。 这绝对可以完成工作，但是更新每个版本的引用可能会很麻烦。

因为我确信我们不是第一个处理这个问题的人，所以我想我会把它扔给社区。 当您更新代码时，您如何确保客户端更新他们的缓存？ 如果您使用上述方法，您是否使用了简化更改的流程？

Answer 1

据我所知，一个常见的解决方案是在脚本的 src 链接中添加一个?<version> 。

例如：

<script type="text/javascript" src="myfile.js?1500"></script>

---

在这一点上，我认为没有比 find-replace 更好的方法来增加所有脚本标签中的这些“版本号”了吗？

您可能有一个版本控制系统为您做这件事？ 例如，大多数版本控制系统都有一种方法可以在签入时自动注入修订号。

它看起来像这样：

<script type="text/javascript" src="myfile.js?$$REVISION$$"></script>

---

当然，总会有更好的解决方案，比如这个。

Answer 2

将当前时间附加到 URL 确实是一种常见的解决方案。 但是，如果需要，您也可以在 Web 服务器级别进行管理。 服务器可以配置为为 javascript 文件发送不同的 HTTP 标头。

例如，要强制缓存文件不超过 1 天，您可以发送：

Cache-Control: max-age=86400, must-revalidate

对于测试版，如果您想强制用户始终获取最新版本，您可以使用：

Cache-Control: no-cache, must-revalidate

Answer 3

Google Page-Speed：不要在静态资源的 URL 中包含查询字符串。 大多数代理，尤其是 3.0 版之前的 Squid，不使用“？”缓存资源。 即使响应中存在 Cache-control: 公共标头，也不会在其 URL 中。 要为这些资源启用代理缓存，请从对静态资源的引用中删除查询字符串，并将参数编码到文件名本身中。

在这种情况下，您可以将版本包含在 URL 中，例如： http://abc.com/ v1.2 /script.js 并使用 apache mod_rewrite 将链接重定向到http://abc.com/script.js 。 当您更改版本时，客户端浏览器将更新新文件。

Answer 4

此用法已弃用： https : //developer.mozilla.org/en-US/docs/Web/HTML/Using_the_application_cache

这个答案只晚了 6 年，但我在很多地方都没有看到这个答案...... HTML5 引入了Application Cache来解决这个问题。 我发现我正在编写的新服务器代码正在使人们浏览器中存储的旧 javascript 崩溃，所以我想找到一种方法来使他们的 javascript 过期。 使用如下所示的清单文件：

CACHE MANIFEST
# Aug 14, 2014
/mycode.js

NETWORK:
*

并在每次您希望用户更新他们的缓存时使用新的时间戳生成此文件。 附带说明一下，如果您添加它，浏览器将不会重新加载（即使用户刷新页面），直到清单告诉它。

Answer 5

如何将文件大小添加为加载参数？

<script type='text/javascript' src='path/to/file/mylibrary.js?filever=<?=filesize('path/to/file/mylibrary.js')?>'></script>

因此，每次更新文件时，“filever”参数都会更改。

当您更新文件并且您的更新结果相同的文件大小时如何？ 几率是多少？

Answer 6

并非所有浏览器都使用“?”缓存文件在里面。 为了确保尽可能多地缓存它，我在文件名中包含了版本。

所以，而不是stuff.js?123 ，我做了stuff_123.js

我在 apache 中使用了mod_redirect （我认为）来have stuff_*.js转到stuff.js

Answer 7

对于 ASP.NET 页面，我使用以下内容

前

<script src="/Scripts/pages/common.js" type="text/javascript"></script>

之后（强制重新加载）

<script src="/Scripts/pages/common.js?ver<%=DateTime.Now.Ticks.ToString()%>" type="text/javascript"></script>

添加 DateTime.Now.Ticks 效果很好。

Answer 8

对于 ASP.NET，我想下一个具有高级选项（调试/发布模式、版本）的解决方案：

以这种方式包含的 Js 或 Css 文件：

<script type="text/javascript" src="Scripts/exampleScript<%=Global.JsPostfix%>" />
<link rel="stylesheet" type="text/css" href="Css/exampleCss<%=Global.CssPostfix%>" />

Global.JsPostfix 和 Global.CssPostfix 在 Global.asax 中的计算方式如下：

protected void Application_Start(object sender, EventArgs e)
{
    ...
    string jsVersion = ConfigurationManager.AppSettings["JsVersion"];
    bool updateEveryAppStart = Convert.ToBoolean(ConfigurationManager.AppSettings["UpdateJsEveryAppStart"]);
    int buildNumber = System.Reflection.Assembly.GetExecutingAssembly().GetName().Version.Revision;
    JsPostfix = "";
#if !DEBUG
    JsPostfix += ".min";
#endif      
    JsPostfix += ".js?" + jsVersion + "_" + buildNumber;
    if (updateEveryAppStart)
    {
        Random rand = new Random();
        JsPosfix += "_" + rand.Next();
    }
    ...
}

Answer 9

现在的普遍做法是生成内容哈希码作为文件名的一部分，以强制浏览器特别是 IE 重新加载 javascript 文件或 css 文件。

例如，

小贩。 a7561fb0e9a071baadb9 .js
主要的。 b746e3eb72875af2caa9 .js

它通常是 webpack 等构建工具的工作。 如果有人想尝试使用 webpack，这里有更多详细信息。

Answer 10

如果您正在生成链接到 JS 文件的页面，一个简单的解决方案是将文件的最后修改时间戳附加到生成的链接。

这与 Huppie 的答案非常相似，但适用于没有关键字替换的版本控制系统。 这也比附加当前时间更好，因为即使文件根本没有更改，也会阻止缓存。

Answer 11

在PHP 中：

function latest_version($file_name){
    echo $file_name."?".filemtime($_SERVER['DOCUMENT_ROOT'] .$file_name);
}

在HTML 中：

<script type="text/javascript" src="<?php latest_version('/a-o/javascript/almanacka.js'); ?>">< /script>

这个怎么运作：

在 HTML 中，按照您的习惯编写文件filepath和名称，但仅在函数中。 PHP获取filetime的文件，并返回filepath+name+"?"+time最新变化

Answer 12

我们一直在为用户创建 SaaS 并为他们提供一个脚本以附加到他们的网站页面中，并且无法附加带有脚本的版本，因为用户会将脚本附加到他们的网站以获得功能，我不能强迫他们每次更新脚本时更改版本

因此，我们找到了一种每次用户调用原始脚本时加载新版本脚本的方法

提供给用户的脚本链接

<script src="https://thesaasdomain.com/somejsfile.js" data-ut="user_token"></script>

脚本文件

if($('script[src^="https://thesaasdomain.com/somejsfile.js?"]').length !== 0) {
   init();
} else {
   loadScript("https://thesaasdomain.com/somejsfile.js?" + guid());
}

var loadscript = function(scriptURL) {
   var head = document.getElementsByTagName('head')[0];
   var script = document.createElement('script');
   script.type = 'text/javascript';
   script.src = scriptURL;
   head.appendChild(script);
}

var guid = function() {
    return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function(c) {
        var r = Math.random() * 16 | 0, v = c == 'x' ? r : (r & 0x3 | 0x8);
        return v.toString(16);
    });
}

var init = function() {
    // our main code
}

解释：

用户已经在他们的网站上附加了提供给他们的脚本，我们检查了脚本附带的唯一令牌是否存在或不使用 jQuery 选择器，如果没有，则使用更新的令牌（或版本）动态加载它

这是两次调用相同的脚本，这可能是一个性能问题，但它确实解决了强制脚本不从缓存加载而不将版本放入给用户或客户端的实际脚本链接的问题

免责声明：如果性能对您来说是一个大问题，请不要使用。

Answer 13

还可以使用 jQuery 函数 getScript 来确保每次加载页面时确实加载了一个 js 文件。

我是这样做的：

$(document).ready(function(){
    $.getScript("../data/playlist.js", function(data, textStatus, jqxhr){
         startProgram();
    });
});

检查http://api.jquery.com/jQuery.getScript/ 上的函数

默认情况下，$.getScript() 将缓存设置设置为 false。 这会将带时间戳的查询参数附加到请求 URL 以确保浏览器在每次请求时都下载脚本。

Answer 14

我的同事刚刚在http://www.stefanhayden.com/blog/2006/04/03/css-caching-hack/ 上发布（参考 css）后，就找到了对该方法的引用。 很高兴看到其他人正在使用它并且它似乎有效。 在这一点上，我认为没有比 find-replace 更好的方法来增加所有脚本标签中的这些“版本号”了吗？

Answer 15

在 asp.net mvc 中，您可以使用@DateTime.UtcNow.ToString()作为 js 文件版本号。 版本号随日期自动更改，您强制客户端浏览器自动刷新 js 文件。 我使用这种方法，效果很好。

<script src="~/JsFilePath/JsFile.js?v=@DateTime.UtcNow.ToString()"></script>

Answer 16

尽管它是特定于框架的，但 Django 1.4 具有staticfiles 应用程序功能，其工作方式与上述答案中的“greenfelt”站点类似

Answer 17

使用版本GET变量来防止浏览器缓存。

将?v=AUTO_INCREMENT_VERSION附加到您的 url 末尾可防止浏览器缓存 - 避免任何和所有缓存脚本。

Answer 18

通过标签助手在 ASP.NET Core 中缓存破坏将为您处理此问题，并允许您的浏览器保留缓存的脚本/css，直到文件更改。 只需将标签助手 asp-append-version="true" 添加到您的脚本 (js) 或链接 (css) 标签中：

<link rel="stylesheet" href="~/css/site.min.css" asp-append-version="true"/>

Dave Paquette 在此处（页面底部） Cache Busting有一个很好的示例和解释缓存破坏

Answer 19

location.reload(true);

见https://www.w3schools.com/jsref/met_loc_reload.asp

我动态调用这行代码以确保 javascript 已从 Web 服务器而不是从浏览器的缓存中重新检索，从而避免此问题。

Answer 20

一种解决方案是在获取资源时将带有时间戳的查询字符串附加到 URL。 这利用了这样一个事实，即浏览器不会缓存从包含查询字符串的 URL 中获取的资源。

不过，您可能根本不希望浏览器不缓存这些资源； 您更有可能希望它们被缓存，但您希望浏览器在文件可用时获取该文件的新版本。

最常见的解决方案似乎是在文件名本身中嵌入时间戳或修订号。 这需要做更多的工作，因为您的代码需要修改以请求正确的文件，但这意味着，例如， snazzy_javascript_file.js （即snazzy_javascript_file_7.js ）的第 7 版会缓存在浏览器上，直到您发布第 8 版，然后您的代码更改为获取snazzy_javascript_file_8.js 。

Answer 21

与fileV1.js相比，使用fileV1.js file.js?V=1的fileV1.js在于您不需要在服务器上存储多个版本的 JavaScript 文件。

我在file.js?V=1看到的问题是，您可能在另一个 JavaScript 文件中有依赖代码，在使用新版本的库实用程序时会中断。

为了向后兼容的缘故，我觉得这是更好的使用jQuery.1.3.js为您的新页，让现有的网页使用jQuery.1.1.js ，直到你准备升级旧的页面，如果需要的话。

Answer 22

一种简单的方法。 编辑 htaccess

RewriteEngine On
RewriteBase /
RewriteCond %{REQUEST_URI} \.(jpe?g|bmp|png|gif|css|js|mp3|ogg)$ [NC]
RewriteCond %{QUERY_STRING} !^(.+?&v33|)v=33[^&]*(?:&(.*)|)$ [NC]
RewriteRule ^ %{REQUEST_URI}?v=33 [R=301,L]

Answer 23

您可以将文件版本添加到文件名中，如下所示：

https://www.example.com/script_fv25.js

fv25 => 文件版本号。 25

并在您的 .htaccess 中放置此块，它将从链接中删除版本部分：

RewriteEngine On
RewriteRule (.*)_fv\d+\.(js|css|txt|jpe?g|png|svg|ico|gif) $1.$2 [L]

所以最终链接将是：

https://www.example.com/script.js

Answer 24

前端选项

我专门为那些无法更改后端任何设置的人制作了这段代码。 在这种情况下，防止超长缓存的最佳方法是：

new Date().getTime()

但是，对于大多数程序员来说，缓存可能需要几分钟或几小时，因此上面的简单代码最终会迫使所有用户下载“浏览的每个页面”。 为了指定此项目在不重新加载的情况下保留多长时间，我制作了此代码并在下面留下了几个示例：

// cache-expires-after.js v1
function cacheExpiresAfter(delay = 1, prefix = '', suffix = '') { // seconds
    let now = new Date().getTime().toString();
    now = now.substring(now.length - 11, 10); // remove decades and milliseconds
    now = parseInt(now / delay).toString();
    return prefix + now + suffix;
};

// examples (of the delay argument):
// the value changes every 1 second
var cache = cacheExpiresAfter(1);
// see the sync
setInterval(function(){
    console.log(cacheExpiresAfter(1), new Date().getSeconds() + 's');
}, 1000);

// the value changes every 1 minute
var cache = cacheExpiresAfter(60);
// see the sync
setInterval(function(){
    console.log(cacheExpiresAfter(60), new Date().getMinutes() + 'm:' + new Date().getSeconds() + 's');
}, 1000);

// the value changes every 5 minutes
var cache = cacheExpiresAfter(60 * 5); // OR 300

// the value changes every 1 hour
var cache = cacheExpiresAfter(60 * 60); // OR 3600

// the value changes every 3 hours
var cache = cacheExpiresAfter(60 * 60 * 3); // OR 10800

// the value changes every 1 day
var cache = cacheExpiresAfter(60 * 60 * 24); // OR 86400

// usage example:
let head = (document.head || document.getElementsByTagName('head')[0]);
let script = document.createElement('script');
script.setAttribute('src', '//unpkg.com/sweetalert@2.1.2/dist/sweetalert.min.js' + cacheExpiresAfter(60 * 5, '?'));
head.append(script);

// this works?
let waitSwal = setInterval(function() {
    if (window.swal) {
        clearInterval(waitSwal);
        swal('Script successfully injected', script.outerHTML);
    };
}, 100);

Answer 25

一个简单的技巧，对我来说很好用，可以防止新旧 javascript 文件之间的冲突。 这意味着：如果存在冲突并发生某些错误，则会提示用户按 Ctrl-F5。

在页面顶部添加类似

<h1 id="welcome"> Welcome to this page <span style="color:red">... press Ctrl-F5</span></h1>

看起来像

让这行 javascript 成为加载页面时最后执行的代码：

document.getElementById("welcome").innerHTML = "Welcome to this page"

如果没有发生错误，上面的欢迎问候将几乎不可见，几乎立即被替换

Answer 26

如果您使用的是 PHP 和 Javascript，那么以下内容应该对您有用，尤其是在您对文件进行多次更改的情况下。 所以，每次你都不能改变它的版本。 所以，想法是在 PHP 中创建一个随机数，然后将其分配为 JS 文件的一个版本。

$fileVersion = rand();
<script src="addNewStudent.js?v=<?php echo $fileVersion; ?>"></script>

Answer 27

以下为我工作：

<head>
<meta charset="UTF-8">
<meta http-equiv="cache-control" content="no-cache, must-revalidate, post-check=0, pre-check=0" />
<meta http-equiv="cache-control" content="max-age=0" />
<meta http-equiv="expires" content="0" />
<meta http-equiv="expires" content="Tue, 01 Jan 1980 1:00:00 GMT" />
<meta http-equiv="pragma" content="no-cache" />
</head>

Answer 28

你可以用 .htaccess 做到这一点

将以下行添加到您的 .htaccess 文件中

# DISABLE CACHING
<IfModule mod_headers.c>
  <FilesMatch "\.js$">
      Header set Cache-Control "no-store, max-age=0"
  </FilesMatch>
</IfModule>

Answer 29

<script>  
  var version = new Date().getTime();  
  var script = document.createElement("script");  
  script.src = "app.js?=" + version;  
  document.body.appendChild(script);  
</script>

如果有人已经在上面过多的答案中的某个地方发布了它，请随意删除它。

Answer 30

最简单的解决方案？ 根本不要让浏览器缓存。 附加当前时间（以毫秒为单位）作为查询。

（您仍处于测试阶段，因此您可以为不优化性能提出合理的理由。但这里是 YMMV。）