浏览器加载缓存HTML页面时如何用JavaScript获取当前时间？

这是浏览器的**往返缓存（BF Cache）**在起作用——当你点击链接再回退时，浏览器会直接恢复之前保存的页面完整状态，包括JS执行后的结果，不会重新加载页面或执行脚本。这就是为什么你的代码不管是直接输出、DOM ready还是定时器，都不会在回退时重新运行。

下面是几种可行的解决方法：

1. 监听pageshow事件（推荐） #

这个事件会在页面首次加载和从BF Cache恢复显示时触发，是最可靠的方式：

window.addEventListener('pageshow', function(event) {
    console.log(Date.now());
    // 可以通过event.persisted判断是否从缓存恢复
    if (event.persisted) {
        console.log("页面从往返缓存恢复，执行更新逻辑");
    }
});

不管是第一次打开页面，还是回退返回，这个事件都会触发，确保你的代码能获取到当前的时间。

2. 禁用往返缓存（不推荐，影响性能） #

如果必须让页面每次回退都重新加载，可以通过以下方式：

• 前端脚本：添加空的unload事件，部分浏览器会因为这个事件禁用BF Cache：

window.addEventListener('unload', function() {});

• 服务器端设置响应头：配置Cache-Control: no-store，强制浏览器不缓存页面，但会导致每次都重新加载资源，影响加载速度。

3. 其他注意事项 #

• $(document).ready、普通内联脚本只会在页面首次加载时执行，BF Cache恢复时不会重新触发；
• 页面进入BF Cache时，定时器会被暂停，恢复后继续，但不会重新初始化，所以无法靠定时器触发新的逻辑；
• Chrome控制台会保留之前的输出，回退时如果没有新的log，会显示旧的时间，这不是JS没执行，而是没有新的输出产生。

内容的提问来源于stack exchange，提问作者Werner