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

本教程将教会我们如何强制客户端刷新 JavaScript 文件。

现在，问题是，为什么我们需要强制客户端刷新 JavaScript 文件？让我们通过一个示例问题来理解它。假设我们已经部署了应用程序，并且许多用户正在使用我们的应用程序。现在，为了提高应用程序的性能和用户界面，我们将持续改进我们的应用程序，并在每个时期后升级其版本。显然，升级应用程序版本后，我们也会将其推送到生产环境。但是有时，在用户屏幕上，客户端 JavaScript 或 CSS 不会升级，即使我们将新代码推送到生产环境，它也会显示旧版本的应用程序。

你能想到为什么会出现这个问题吗？请继续阅读以了解答案。当用户第一次在浏览器中打开我们的应用程序时，浏览器会将该网页的缓存存储在本地存储中。因此，当用户下次从同一浏览器访问该网页时，由于存储的缓存，加载速度不会太慢。因此，在我们的案例中，存储的缓存造成了问题。我们将应用程序的代码升级到了生产环境，但浏览器从本地存储（或我们可以说缓存）中获取 CSS 和 JavaScript 文件。浏览器不是从服务器重新加载新文件，而是从缓存加载并向用户显示旧版本的应用程序。

我们已经在下面解释了一些解决方案，以便在升级应用程序后从服务器重新加载 JavaScript 文件。

强制刷新浏览器

最简单的解决方案是强制刷新浏览器。用户可以在打开应用程序窗口后按ctrl + F5或ctrl + shift + R强制刷新浏览器。在 Mac 上，用户可以按cmd + R。它将再次从服务器重新加载所有文件，如果您已更新 JavaScript 文件，它将替换客户端浏览器本地缓存中的升级文件。

强制刷新浏览器的另一种方法是按住 ctrl 键并单击浏览器左上角的刷新按钮。Mac 用户必须按住cmd键并单击刷新按钮。

太好了！此解决方案有效，因为您进行强制刷新；它会从服务器重新加载所有文件。但是，每次升级应用程序时都告诉应用程序用户强制刷新浏览器好吗？这不是一个好习惯。因此，我们在下面提出了另一个最佳解决方案。

更改脚本标签中的文件路径

在这种方法中，我们将更改 JavaScript 脚本标签中的源 URL，以欺骗浏览器并再次从服务器重新加载所有更改的文件。我们只需在文件的源 URL 后添加一些查询参数。

用户可以按照以下语法在源标签中编辑源 URL。

语法

  • 旧脚本标签

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

  • 新脚本标签

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

参数

  • version − 用户可以添加任何字符串作为版本来跟踪新版本。最普遍的方法是添加任何版本，但用户也可以添加日期和时间以使其唯一。

示例

下面的示例演示了如何在每次升级应用程序版本时动态附加日期和时间。

<script type="text/javascript">  
   //get the date and time
   var currentDate = (new Date()).getTime();  
   
   //create new script element
   var newScriptElement = document.createElement("script");  
   newScriptElement.type = "text/javascript";  
   
   // add current date to URL as a query parameter
   newScriptElement.src = "script.js?" + currentDate;  
   
   // append new script element to body.
   document.body.appendChild(newScriptElement);  
</script>

用户可以看到我们在上面的示例中将日期和时间附加到了脚本文件源 URL。当浏览器尝试使用更新的 URL 查找脚本文件时，它将无法从本地缓存中获取它。之后，浏览器必须需要从服务器重新加载它。

此外，用户可以通过编辑 .htaccess 文件来实现此目的：

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

这样，每当我们将应用程序的更新推送到生产环境时，我们就可以使浏览器自动重新加载 JavaScript 文件。

告诉用户强制刷新和清除缓存以查看客户端应用程序的新版本并不是一个好习惯。因此，开发人员可以使用第二种方法，只需向文件路径添加查询参数即可使其自动重新加载所有更新的文件。

更新于：2022年8月10日

浏览量：11K+

启动您的职业生涯

完成课程后获得认证

开始
广告