当用户通过浏览器后退按钮返回缓存的 HTML 页面时，JavaScript 可能不会重新执行（尤其在 Chrome 的 bfcache 机制下），导致 Date.now() 返回旧时间戳而非实时时间。本文详解原因及可靠解决方案。
当用户通过浏览器后退按钮返回缓存的 html 页面时，javascript 可能不会重新执行（尤其在 chrome 的 bfcache 机制下），导致 `date.now()` 返回旧时间戳而非实时时间。本文详解原因及可靠解决方案。
现代浏览器（尤其是 Chrome 和 Safari）为提升导航性能，引入了往返缓存（Back/Forward Cache，简称 bfcache）：当用户点击“后退”或“前进”时，页面并非重新加载，而是从内存中直接恢复整个页面状态——包括 DOM、JavaScript 执行上下文、甚至未完成的定时器。这意味着：
- <script> 标签中的代码仅在首次加载时执行；</script>
- $(document).ready() 或 setTimeout 等异步逻辑不会再次触发；
- Date.now() 输出的是页面初始加载时刻的时间戳，而非当前真实时间。
这正是你观察到 Chrome 显示相同时间戳、Firefox 控制台无输出（因脚本被跳过执行）的根本原因。
✅ 正确解法：监听 pageshow 事件并检测 event.persisted
pageshow 是 bfcache 场景下的关键生命周期事件，它在页面显示时总是触发（无论首次加载还是从 bfcache 恢复），且其事件对象提供 persisted 属性用于区分：
- event.persisted === false → 页面正常加载（非缓存恢复）；
- event.persisted === true → 页面从 bfcache 恢复，此时需主动刷新时间或重初始化逻辑。
<script>
window.addEventListener('pageshow', function(event) {
if (event.persisted) {
// 页面从 bfcache 恢复：强制更新时间或重执行关键逻辑
console.log('Restored from bfcache — current time:', Date.now());
// ✅ 推荐：更新所有依赖实时时间的元素（例如显示“最后更新于”）
const now = new Date();
document.getElementById('timestamp')?.textContent =
now.toLocaleString('zh-CN', { hour12: false });
} else {
// 首次加载：正常初始化
console.log('Fresh load — current time:', Date.now());
}
});
// 补充：若需确保首次加载也记录时间，可在此处同步执行一次
console.log('Initial load time:', Date.now());
</script>? 注意：不要使用 pagehide + location.reload() 强制刷新来规避 bfcache——这会破坏用户体验、增加网络开销，且违背 Web 性能最佳实践。pageshow + event.persisted 是标准、轻量、语义清晰的现代方案。
立即学习“Java免费学习笔记（深入）”；
? 进阶建议
- 若你的应用依赖高精度实时性（如倒计时、心跳检测），应在 pageshow 中重置定时器，并检查 performance.timeOrigin 或 performance.now() 以校准时间漂移；
- 在开发阶段，可通过 Chrome DevTools → Application → Back-forward cache → “Disable cache” 临时禁用 bfcache 方便调试；
- Firefox 默认启用 bfcache，但行为略有差异；Safari 自 iOS 16.4 / macOS Ventura 起全面支持，均遵循同一规范。
总之，不依赖 DOMContentLoaded 或 load 事件来获取“当前时间”，而应统一使用 pageshow 作为时间敏感逻辑的入口点——这是适配现代浏览器缓存策略的健壮实践。
