如何强制浏览器重新加载缓存的 CSS 和 JS 文件？

Question

我注意到一些浏览器（特别是 Firefox 和 Opera）非常热心使用 .css 和 .js 文件的缓存副本，甚至在浏览器会话之间也是如此。 当您更新这些文件之一，但用户的浏览器继续使用缓存的副本时，这会导致问题。

当文件更改时强制用户浏览器重新加载文件的最优雅的方法是什么？

理想情况下，该解决方案不会强制浏览器在每次访问页面时重新加载文件。

---

我发现 约翰米利金的和da5id的建议很有用。 事实证明有一个术语：自动版本控制。

我在下面发布了一个新答案，它是我原来的解决方案和约翰的建议的结合。

SCdF 提出的另一个想法是将伪造的查询字符串附加到文件中。 （一些Python代码，自动使用时间戳作为虚假查询字符串，是由pi.提交。）

但是，对于浏览器是否会缓存带有查询的文件存在一些讨论细绳。 （请记住，我们希望浏览器缓存该文件并在将来访问时使用它。我们只希望它在文件发生更改时再次获取该文件。）

Answer 1

该解决方案是用 PHP 编写的，但它应该很容易适应其他语言。

原始 .htaccess 正则表达式可能会导致 json-1.3.js 等文件出现问题。 解决方案是仅当末尾正好有 10 位数字时才重写。 （因为 10 位数字涵盖了从 9/9/2001 到 11/20/2286 的所有时间戳。）

首先，我们在 .htaccess 中使用以下重写规则：

RewriteEngine on
RewriteRule ^(.*)\.[\d]{10}\.(css|js)$ $1.$2 [L]

现在，我们编写以下 PHP 函数：

/**
 *  Given a file, i.e. /css/base.css, replaces it with a string containing the
 *  file's mtime, i.e. /css/base.1221534296.css.
 *
 *  @param $file  The file to be loaded. works on all type of paths.
 */
function auto_version($file) {
  if($file[0] !== '/') {
    $file = rtrim(str_replace(DIRECTORY_SEPARATOR, '/', dirname($_SERVER['PHP_SELF'])), '/') . '/' . $file;
  }
  
  if (!file_exists($_SERVER['DOCUMENT_ROOT'] . $file))
  return $file;
  
  $mtime = filemtime($_SERVER['DOCUMENT_ROOT'] . $file);
  return preg_replace('{\\.([^./]+)$}', ".$mtime.\$1", $file);
}

现在，无论您在何处包含 CSS，将其从这样： 改为

<link rel="stylesheet" href="/css/base.css" type="text/css" />

这样： 这样

<link rel="stylesheet" href="<?php echo auto_version('/css/base.css'); ?>" type="text/css" />

，您就不必再次修改链接标签，并且用户将始终看到最新的CSS。 浏览器将能够缓存 CSS 文件，但当您对 CSS 进行任何更改时，浏览器会将其视为新 URL，因此不会使用缓存的副本。

这也适用于图像、图标和 JavaScript。 基本上任何不是动态生成的东西。

Answer 2

简单的客户端技术

一般来说，缓存是好的......因此有几种技术，具体取决于您是否在开发网站时自己解决问题，或者是否尝试在网站中控制缓存。生产环境。

您网站的一般访问者不会获得与您开发网站时相同的体验。 由于普通访问者访问该网站的频率较低（可能每个月只有几次，除非您是 Google 或 hi5 Networks），因此他们不太可能在缓存中保存您的文件，这可能就足够了。

如果您想在浏览器中强制使用新版本，您可以随时向请求添加查询字符串，并在进行重大更改时增加版本号：

<script src="/myJavascript.js?version=4"></script>

这将确保每个人都能获得新文件。 它之所以有效，是因为浏览器会查看文件的 URL 来确定缓存中是否有该文件的副本。 如果您的服务器未设置为对查询字符串执行任何操作，它将被忽略，但该名称在浏览器中看起来就像一个新文件。

另一方面，如果您正在开发网站，您不希望每次保存对开发版本的更改时都更改版本号。 那会很乏味。

因此，在开发网站时，一个好技巧是自动生成查询字符串参数：

<!-- Development version: -->
<script>document.write('<script src="/myJavascript.js?dev=' + Math.floor(Math.random() * 100) + '"\><\/script>');</script>

向请求添加查询字符串是对资源进行版本控制的好方法，但对于简单的网站来说，这可能是不必要的。 请记住，缓存是一件好事。

还值得注意的是，浏览器不一定会吝啬将文件保留在缓存中。 浏览器对这类事情有策略，它们通常按照 HTTP 规范中规定的规则进行操作。 当浏览器向服务器发出请求时，响应的一部分是 Expires 标头。 .. 告诉浏览器应在缓存中保留多长时间的日期。 下次浏览器遇到对同一文件的请求时，它会看到缓存中有一个副本，并查看过期日期来决定是否应该使用它。

因此，无论您相信与否，实际上是您的服务器使浏览器缓存如此持久。 您可以调整服务器设置并更改 Expires 标头，但我上面写的小技巧可能是一种更简单的方法。 由于缓存很好，您通常希望将该日期设置为遥远的未来（“远未来过期标头”），并使用上述技术来强制更改。

如果您对有关 HTTP 或如何发出这些请求的更多信息感兴趣，Steve Souders 所著的《高性能网站》是一本好书。 这是对该主题的很好的介绍。

Answer 3

Google 的 mod_pagespeed 插件 Apache 将为您进行自动版本控制。 真的很光滑。

它在网络服务器之外解析 HTML（适用于 PHP、Ruby on Rails、Python 、静态 HTML - 任何内容）并重写 CSS、JavaScript、图像文件的链接，以便它们包含 id 代码。 它在修改后的 URL 上提供文件，并对其进行很长的缓存控制。 当文件更改时，它会自动更改 URL，因此浏览器必须重新获取它们。 它基本上可以正常工作，无需对代码进行任何更改。 它甚至还会在退出时缩小您的代码。

Answer 4

我不知道为什么你们要这么痛苦地实施这个解决方案。

您需要做的就是获取文件的修改时间戳并将其作为查询字符串附加到文件中。

在 PHP 中，我会这样做：

<link href="mycss.css?v=<?= filemtime('mycss.css') ?>" rel="stylesheet">

filemtime() 是一个返回文件修改时间戳的 PHP 函数。

Answer 5

我建议您使用实际 CSS 文件的 MD5 哈希值，而不是手动更改版本。

所以你的 URL 会是这样的

http://mysite.com/css/[md5_hash_here]/style.css

你仍然可以使用重写规则来去掉哈希值，但优点是现在你可以将缓存策略设置为“永远缓存”，因为如果 URL 相同，那就意味着文件未更改。

然后，您可以编写一个简单的 shell 脚本来计算文件的哈希值并更新您的标签（您可能希望将其移动到单独的文件中以供包含）。

只需在每次 CSS 更改时运行该脚本即可。 浏览器只会在文件被更改时重新加载您的文件。 如果您进行编辑然后撤消它，那么您可以轻松地确定需要返回哪个版本以避免访问者重新下载。

Answer 6

您可以将 ?foo=1234 放在 CSS / JavaScript 导入的末尾，将 1234 更改为您喜欢的任何值。 查看 StackOverflow HTML 源代码的示例。

其想法是， ? 参数无论如何都会在请求中被丢弃/忽略，并且您可以在推出新版本时更改该数字。

---

注意：关于这到底如何影响缓存存在一些争论。 我相信它的总体要点是 GET 请求，带或不带参数应该是可缓存的，所以上面的解决方案应该可以工作。

然而，由网络服务器决定是否要遵守规范的该部分以及用户使用的浏览器，因为无论如何它都可以直接请求新版本。

Answer 7

我听说这称为“自动版本控制”。 最常见的方法是在 URL 中的某处包含静态文件的修改时间，然后使用重写处理程序或 URL 配置将其删除：

另请参阅：

• Django 中的自动资源版本控制
• 自动版本化您的 CSS 和 JavaScript 文件

Answer 8

对于大约 2008 年的网站来说，现有的 30 个左右的答案是很好的建议。 但是，对于现代的单页应用程序 (SPA)，可能是时候重新考虑一些基本假设了……特别是 Web 服务器最好只提供文件的单个最新版本的想法。

假设您是一位用户，浏览器中已加载 SPA M 版本：

1. 您的 CD 管道将应用程序的新版本 N 部署到服务器上
2. 您在 SPA 中导航，该 SPA 发送 XMLHttpRequest (XHR) 到服务器以获取 /some.template

• （您的浏览器尚未刷新页面，因此您仍在运行版本M)

1. 服务器响应 /some.template 的内容 - 您希望它返回版本 M 还是 N 模板？

如果 /some.template 的格式在版本 M 和 N 之间发生了变化（或者文件被重命名或其他什么）你可能不知道不希望将模板的版本 N 发送到运行旧版本 M 解析器的浏览器。†

当满足两个条件时，Web 应用程序会遇到此问题满足：

• 在初始页面加载后的某个时间异步请求资源
• 应用程序逻辑假设有关资源内容的事情（在未来版本中可能会改变）

一旦您的应用程序需要并行提供多个版本，解决缓存和“重新加载” " 变得微不足道：

1. 将所有站点文件安装到版本化目录中：/v/…files…、/v/…files…
2. 设置HTTP 标头让浏览器永久缓存文件

• （或者更好的是，将所有内容放入 CDN）

1. 更新所有

最后一步听起来很棘手，因为它可能需要为服务器端或客户端代码中的每个 URL 调用 URL 构建器。 或者您可以巧妙地利用 ; 标记 并在一处更改当前版本。

解决这个问题的一种方法是在新版本发布时积极强制浏览器重新加载所有内容。 但为了让任何正在进行的操作完成，并行支持至少两个版本可能仍然是最简单的：v-current 和 v-previous。

Answer 9

在 Laravel (PHP) 中，我们可以通过以下清晰而优雅的方式来做到这一点（使用文件修改时间戳）：

<script src="{{ asset('/js/your.js?v='.filemtime('js/your.js')) }}"></script>

与 CSS

<link rel="stylesheet" href="{{asset('css/your.css?v='.filemtime('css/your.css'))}}">

示例 HTML 输出类似（filemtime 返回时间作为 Unix 时间戳)

<link rel="stylesheet" href="assets/css/your.css?v=1577772366">

Answer 10

不要使用 foo.css?version=1！

浏览器不应该缓存带有 GET 变量的 URL。 根据 http://www.thinkvitamin.com/features/webapps/serving- javascript-fast，尽管 Internet Explorer 和 Firefox 会忽略这一点，Opera 和 Safari 不会！ 相反，请使用 foo.v1234.css，并使用重写规则来删除版本号。

Answer 11

这是一个纯 JavaScript 解决方案

(function(){
    
    // Match this timestamp with the release of your code
    var lastVersioning = Date.UTC(2014, 11, 20, 2, 15, 10);
     
    var lastCacheDateTime = localStorage.getItem('lastCacheDatetime');
    
    if(lastCacheDateTime){
        if(lastVersioning > lastCacheDateTime){
            var reload = true;
        }
     }

    localStorage.setItem('lastCacheDatetime', Date.now());

    if(reload){
        location.reload(true);
    }
})();

上面将查找用户上次访问您的网站的时间。 如果上次访问是在您发布新代码之前，它会使用 location.reload(true) 强制从服务器刷新页面。

我通常将其作为 中的第一个脚本，以便在加载任何其他内容之前对其进行评估。 如果需要重新加载，用户几乎不会注意到。

我使用本地存储来存储浏览器上的上次访问时间戳，但如果您希望支持旧版本的 IE，则可以添加 cookie。

Answer 12

RewriteRule 需要对末尾包含点符号版本控制的 JavaScript 或 CSS 文件进行小更新。 例如，json-1.3.js。

我在正则表达式中添加了一个点否定类 [^.]，所以 .number。 被忽略。

RewriteRule ^(.*)\.[^.][\d]+\.(css|js)$ $1.$2 [L]

Answer 13

有趣的帖子。 阅读了这里的所有答案，再加上我从来没有遇到过“虚假”查询字符串的任何问题（我不确定为什么每个人都不愿意使用它），我想解决方案（这消除了对 Apache 重写规则的需要）如已接受的答案中所示）是将 CSS 文件内容（而不是文件日期时间）的短哈希计算为虚假查询字符串。

这将导致以下结果：

<link rel="stylesheet" href="/css/base.css?[hash-here]" type="text/css" />

当然，日期时间解决方案也可以在编辑 CSS 文件的情况下完成工作，但我认为这是关于 CSS 文件内容而不是关于文件日期时间，所以为什么要把这些混合在一起？

Answer 14

对于 ASP.NET 4.5 及更高版本，您可以使用脚本捆绑。

请求http：// localhost/mvcbm_time/bundles/allmyscripts？v = r0sldicvp58aixn_mc3qdyvvj5euznznzdnzdnzdn1n1pkvbvb81v 有一个值标记，它是用于缓存的唯一标识符。 只要捆绑包不发生更改，ASP.NET 应用程序就会使用此令牌请求 AllMyScripts 捆绑包。 如果捆绑包中的任何文件发生更改，ASP.NET 优化框架将生成新的令牌，保证浏览器对该捆绑包的请求将获得最新的捆绑包。

捆绑还有其他好处，包括通过缩小来提高首次页面加载的性能。

Answer 15

对于我的开发来说，我发现 Chrome 有一个很好的解决方案。

https://superuser.com/a/512833

打开开发者工具后，只需长按刷新按钮并在悬停后松开即可超过“清空缓存和硬重新加载”。

这是我最好的朋友，是获得你想要的东西的超轻量级方式！

Answer 16

感谢 Kip 的完美解决方案！

我对其进行了扩展，将其用作 Zend_view_Helper。 因为我的客户在虚拟主机上运行他的页面，所以我也为此进行了扩展。

/**
 * Extend filepath with timestamp to force browser to
 * automatically refresh them if they are updated
 *
 * This is based on Kip's version, but now
 * also works on virtual hosts
 * @link http://stackoverflow.com/questions/118884/what-is-an-elegant-way-to-force-browsers-to-reload-cached-css-js-files
 *
 * Usage:
 * - extend your .htaccess file with
 * # Route for My_View_Helper_AutoRefreshRewriter
 * # which extends files with there timestamp so if these
 * # are updated a automatic refresh should occur
 * # RewriteRule ^(.*)\.[^.][\d]+\.(css|js)$ $1.$2 [L]
 * - then use it in your view script like
 * $this->headLink()->appendStylesheet( $this->autoRefreshRewriter($this->cssPath . 'default.css'));
 *
 */
class My_View_Helper_AutoRefreshRewriter extends Zend_View_Helper_Abstract {

    public function autoRefreshRewriter($filePath) {

        if (strpos($filePath, '/') !== 0) {

            // Path has no leading '/'
            return $filePath;
        } elseif (file_exists($_SERVER['DOCUMENT_ROOT'] . $filePath)) {

            // File exists under normal path
            // so build path based on this
            $mtime = filemtime($_SERVER['DOCUMENT_ROOT'] . $filePath);
            return preg_replace('{\\.([^./]+)$}', ".$mtime.\$1", $filePath);
        } else {

            // Fetch directory of index.php file (file from all others are included)
            // and get only the directory
            $indexFilePath = dirname(current(get_included_files()));

            // Check if file exist relativ to index file
            if (file_exists($indexFilePath . $filePath)) {

                // Get timestamp based on this relativ path
                $mtime = filemtime($indexFilePath . $filePath);

                // Write generated timestamp to path
                // but use old path not the relativ one
                return preg_replace('{\\.([^./]+)$}', ".$mtime.\$1", $filePath);
            } else {
                return $filePath;
            }
        }
    }
}

Answer 17

我还没有找到动态创建脚本节点（或 CSS）元素的客户端 DOM 方法：

<script>
    var node = document.createElement("script");
    node.type = "text/javascript";
    node.src = 'test.js?' + Math.floor(Math.random()*999999999);
    document.getElementsByTagName("head")[0].appendChild(node);
</script>

Answer 18

假设您有一个文件位于：

/styles/screen.css

您可以将带有版本信息的查询参数附加到 URI 上，例如：

/styles/screen.css?v=1234

或者您可以在前面添加版本信息，例如：

/v/1234/styles/screen.css

恕我直言，第二种方法对于 CSS 文件更好，因为它们可以引用图像使用相对 URL，这意味着如果您像这样指定一个 background-image：

body {
    background-image: url('images/happy.gif');
}

它的 URL 将有效为：

/v/1234/styles/images/happy.gif

这意味着如果您更新使用的版本号，服务器会将其视为新资源，并且不使用缓存版本。 如果您的版本号基于 Subversion，CVS 等修订版这意味着 CSS 文件中引用的图像的更改将被注意到。 第一个方案不能保证这一点，即相对于 /styles/screen.css?v=1235 的 URL images/happy.gif 是 /styles /images/happy.gif 不包含任何版本信息。

我已经使用这种技术与 Java servlet 实现了一个缓存解决方案，并且只需使用委托给底层资源的 servlet 处理对 /v/* 的请求（即 /styles/screen.css/styles/screen.css代码>）。 在开发模式下，我设置了缓存标头，告诉客户端始终通过服务器检查资源的新鲜度（如果您委托给 Tomcat 的 DefaultServlet 和 .css<，这通常会导致 304 /code>、.js 等文件未更改）在部署模式下，我设置了“永久缓存”的标头。

Answer 19

您可以简单地使用 CSS 和 JavaScript URL 添加一些随机数，例如

example.css?randomNo = Math.random()

Answer 20

Google Chrome 具有硬重新加载以及清空缓存和硬重新加载选项。 您可以单击并按住重新加载按钮（在检查模式中）来选择一个。

Answer 21

我最近用Python解决了这个问题。 下面是代码（应该很容易采用其他语言）：

def import_tag(pattern, name, **kw):
    if name[0] == "/":
        name = name[1:]
    # Additional HTML attributes
    attrs = ' '.join(['%s="%s"' % item for item in kw.items()])
    try:
        # Get the files modification time
        mtime = os.stat(os.path.join('/documentroot', name)).st_mtime
        include = "%s?%d" % (name, mtime)
        # This is the same as sprintf(pattern, attrs, include) in other
        # languages
        return pattern % (attrs, include)
    except:
        # In case of error return the include without the added query
        # parameter.
        return pattern % (attrs, name)

def script(name, **kw):
    return import_tag('<script %s src="/%s"></script>', name, **kw)

def stylesheet(name, **kw):
    return import_tag('<link rel="stylesheet" type="text/css" %s href="/%s">', name, **kw)

该代码基本上将文件时间戳作为查询参数附加到 URL。 调用以下函数

script("/main.css")

将导致

<link rel="stylesheet" type="text/css"  href="/main.css?1221842734">

当然的好处是您不必再次更改 HTML 内容，触摸 CSS 文件将自动触发缓存失效。 它工作得很好，而且开销并不明显。

Answer 22

如果您将会话 ID 添加为 JavaScript/CSS 文件的虚假参数，则可以强制执行“会话范围内的缓存”：

<link rel="stylesheet" src="myStyles.css?ABCDEF12345sessionID" />
<script language="javascript" src="myCode.js?ABCDEF12345sessionID"></script>

如果您想要版本范围内的缓存，您可以添加一些代码来打印文件日期或类似内容。 如果您使用 Java，则可以使用自定义标签以优雅的方式生成链接。

<link rel="stylesheet" src="myStyles.css?20080922_1020" />
<script language="javascript" src="myCode.js?20080922_1120"></script>

Answer 23

对于 ASP.NET，我建议使用以下高级选项（调试/发布模式、版本）解决方案： 以

这种方式包含 JavaScript 或 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 24

如果您使用 Git 和 PHP，则每次都可以从缓存中重新加载脚本是在Git存储库中进行更改，使用以下代码：

exec('git rev-parse --verify HEAD 2> /dev/null', $gitLog);
echo '  <script src="/path/to/script.js"?v='.$gitLog[0].'></script>'.PHP_EOL;

Answer 25

只需将此代码添加到您想要执行硬重新加载的位置（强制浏览器重新加载缓存的 CSS 和 JavaScript 文件）：

$(window).load(function() {
    location.reload(true);
});

在 .load 内执行此操作，这样它就不会像循环一样刷新。

Answer 26

对于开发：使用浏览器设置：例如，Chrome network 选项卡 有一个禁用缓存 选项。

对于生产：使用服务器端渲染框架或纯 JavaScript 代码将唯一的查询参数附加到请求（例如、q?Date.now()）。

// Pure JavaScript unique query parameter generation
//
//=== myfile.js

function hello() { console.log('hello') };

//=== end of file

<script type="text/javascript">
    document.write('<script type="text/javascript" src="myfile.js?q=' + Date.now() + '">
    // document.write is considered bad practice!
    // We can't use hello() yet
</script>')

<script type="text/javascript">
    hello();
</script>

Answer 27

对于在开发和测试时遇到此问题的开发人员：

暂时删除缓存。

“保持缓存与文件一致” ..这太麻烦了..

一般来说，我不介意加载更多 - 甚至在大多数项目上再次加载未更改的文件 - 实际上是无关紧要。 在开发应用程序时 - 我们主要从 localhost:port 上的磁盘加载 - 因此这个网络流量增加问题不是一个破坏交易的问题。

大多数小项目只是玩玩——它们永远不会最终投入生产。 因此，对于他们来说，您不需要更多的东西...

因此，如果您使用 Chrome DevTools，您可以遵循这种禁用缓存方法，如下图所示：

如果您有 Firefox 缓存问题：

仅在开发中执行此操作。 您还需要一种机制来强制重新加载生产环境，因为如果您经常更新应用程序并且不提供像上面答案中所述的专用缓存同步机制，您的用户将使用旧的缓存无效模块。

是的，这些信息已经在之前的答案中，但我仍然需要进行谷歌搜索才能找到它。

Answer 28

似乎这里的所有答案都表明命名方案中存在某种版本控制，这有其缺点。

浏览器应该通过读取 Web 服务器的响应（特别是 HTTP 标头）来清楚地了解要缓存的内容和不缓存的内容 - 该资源的有效期限是多长时间？ 该资源自我上次检索以来是否已更新？ 等等。

如果配置“正确”，只需更新应用程序的文件就应该（在某些时候）刷新浏览器的缓存。 例如，您可以配置 Web 服务器来告诉浏览器永远不要缓存文件（这是一个坏主意）。

有关其工作原理的更深入说明请参阅Web 缓存工作原理 。

Answer 29

只需使用服务器端代码添加文件的日期...这样它将被缓存，并且仅在文件更改时重新加载。

在 ASP.NET 中：

<link rel="stylesheet" href="~/css/custom.css?d=@(System.Text.RegularExpressions.Regex.Replace(File.GetLastWriteTime(Server.MapPath("~/css/custom.css")).ToString(),"[^0-9]", ""))" />

<script type="text/javascript" src="~/js/custom.js?d=@(System.Text.RegularExpressions.Regex.Replace(File.GetLastWriteTime(Server.MapPath("~/js/custom.js")).ToString(),"[^0-9]", ""))"></script>

这可以简化为：

<script src="<%= Page.ResolveClientUrlUnique("~/js/custom.js") %>" type="text/javascript"></script>

通过向项目添加扩展方法来扩展 Page：

public static class Extension_Methods
{
    public static string ResolveClientUrlUnique(this System.Web.UI.Page oPg, string sRelPath)
    {
        string sFilePath = oPg.Server.MapPath(sRelPath);
        string sLastDate = System.IO.File.GetLastWriteTime(sFilePath).ToString();
        string sDateHashed = System.Text.RegularExpressions.Regex.Replace(sLastDate, "[^0-9]", "");

        return oPg.ResolveClientUrl(sRelPath) + "?d=" + sDateHashed;
    }
}

Answer 30

您可以使用 SRI 来破坏浏览器缓存。 您每次只需使用新的 SRI 哈希更新您的 index.html 文件。 当浏览器加载 HTML 并发现 HTML 页面上的 SRI 哈希与资源的缓存版本不匹配时，它将从服务器重新加载您的资源。 它还具有绕过跨域读取阻塞的良好副作用。

<script src="https://jessietessie.github.io/google-translate-token-generator/google_translate_token_generator.js" integrity="sha384-muTMBCWlaLhgTXLmflAEQVaaGwxYe1DYIf2fGdRkaAQeb4Usma/kqRWFWErr2BSi" crossorigin="anonymous"></script>