UPDATED刷新所有外部资源(图像，JavaScript, CSS等)

把这个放到名为HardRefresh.js的文件中:

  function hardRefresh() {
    const t = parseInt(Date.now() / 10000); //10s tics
    const x = localStorage.getItem("t");
    localStorage.setItem("t", t);

    if (x != t) location.reload(true) //force page refresh from server
    else { //refreshed from server within 10s
      const a = document.querySelectorAll("a, link, script, img")
      var n = a.length
      while(n--) {
        var tag = a[n]
        var url = new URL(tag.href || tag.src);
        url.searchParams.set('r', t.toString());
        tag.href = url.toString(); //a, link, ...
        tag.src = tag.href; //rerun script, refresh img
      }
    }
  }

  window.addEventListener("DOMContentLoaded", hardRefresh);
  window.addEventListener("deviceorientation", hardRefresh, true);

这段代码对每个访问者进行完全控制的强制硬刷新，这样任何更新都不会出现兑现问题。

复制DOM渲染不是一个性能问题，因为第一次渲染来自缓存，它在<script src="js/HardRefresh.js">中停止渲染，它从服务器重新加载页面。当它运行刷新页面时，它也刷新页面中的url。

最后一次刷新时间x存储在localStorage中。与当前时间t比较，刷新时间在10秒内。假设来自服务器的负载不超过10秒，我们设法停止页面刷新循环，所以不要让它少于10秒。

对于页面的访问者，x != t是真实的，因为很久以前或第一次访问;这将从服务器获取页面。然后diff小于10s, x == t，这将使else部分添加查询字符串到href和src有源刷新。

refresh()函数可以通过按钮或其他有条件的方式调用。完全控制是通过在代码中细化url的排除和包含来管理的。

⚠️此解决方案并不适用于所有浏览器。location.reload()的MDN页面: 注意:Firefox支持location.reload()的非标准forceGet布尔参数，它告诉Firefox绕过缓存并强制重载当前文档。但是，在所有其他浏览器中，您在location.reload()调用中指定的任何参数都将被忽略，并且没有任何类型的影响。

Try:

location.reload(true);

当此方法接收到一个真值作为参数时，它将导致页面总是从服务器重新加载。如果为false或未指定，浏览器可能会从缓存中重新加载页面。

更多信息:

location对象

我发现的最可靠的方法是通过向查询字符串添加值来使用chache buster。

下面是我常用的一个常规程序:

    function reloadUrl() {

        // cache busting: Reliable but modifies URL
        var queryParams = new URLSearchParams(window.location.search);
        queryParams.set("lr", new Date().getTime());        
        var query = queryParams.toString();                
        window.location.search = query;  // navigates
    }

调用这个函数会产生如下结果:

https://somesite.com/page?lr=1665958485293

重载后。

这可以强制每次重新加载，但需要注意的是URL会更改。在大多数应用程序中，这并不重要，但如果服务器依赖于特定的参数，这可能会导致潜在的副作用。

window.location.href = window.location.href

对于angular用户，你可以执行以下操作:

<form [action]="myAppURL" method="POST" #refreshForm></form>

import { Component, OnInit, ViewChild } from '@angular/core';

@Component({
  // ...
})
export class FooComponent {
  @ViewChild('refreshForm', { static: false }) refreshForm;

  forceReload() {
    this.refreshForm.nativeElement.submit();
  }
}

它起作用的原因在这个网站上有解释:https://www.xspdf.com/resolution/52192666.html

在本文中，您还将了解到硬重载是如何为每个框架工作的

解释:角

Location: reload()， Location.reload()方法重载当前URL，就像Refresh按钮一样。只使用location.reload();如果你想执行强制重载(例如使用Ctrl + F5)来重载服务器而不是浏览器缓存中的所有资源，这不是一个解决方案。这个问题的解决方案是，执行一个POST请求到当前位置，因为这总是使浏览器重新加载所有内容。

上面接受的答案不再做任何事情，除了在大多数新版本的web浏览器上正常重新加载。我已经在我最近更新的Chrome上尝试了所有这些，包括location.reload(true)， location。Href = location。/>. href, and <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate"没有一个成功。

我的解决方案是通过使用服务器端功能将非重复查询字符串附加到所有包含的源文件引用，如下例所示。

< src = "脚本。js脚本吗? =时间();t = < ?> > < /脚本”>

因此，您还需要动态地控制何时保留以前的文件，何时更新它。唯一的问题是，当文件包含通过脚本由插件执行时，你无法控制修改它。不要担心源文件泛滥。当旧文件被解除链接时，它将自动被垃圾收集。