当用户通过浏览器“后退”按钮返回已缓存的 HTML 页面时，部分浏览器（如 Chrome）会启用 BFCache（Back/Forward Cache），导致页面脚本不重新执行，Date.now() 仍返回首次加载时的时间戳。本文详解其成因与可靠解决方案。
当用户通过浏览器“后退”按钮返回已缓存的 html 页面时，部分浏览器（如 chrome）会启用 bfcache（back/forward cache），导致页面脚本不重新执行，`date.now()` 仍返回首次加载时的时间戳。本文详解其成因与可靠解决方案。
现代浏览器为提升导航性能，广泛采用 BFCache（Back/Forward Cache）：当用户点击「后退」或「前进」按钮时，浏览器并非重新加载页面，而是直接从内存中恢复整个页面状态（包括 DOM、JavaScript 执行上下文、甚至未完成的定时器）。这正是你观察到 Date.now() 不更新、$(document).ready 不触发、setTimeout 也失效的根本原因——脚本根本没被重新执行，而是从缓存中“唤醒”了旧实例。
Firefox 的行为差异（控制台无输出）同样源于 BFCache：它可能跳过了脚本执行阶段，或因缓存策略更激进而未触发任何生命周期回调。
✅ 正确检测并响应 BFCache 恢复的关键是监听 pageshow 事件，并检查 event.persisted 属性：
// 推荐：在页面加载时立即注册 pageshow 监听器
window.addEventListener('pageshow', function(event) {
if (event.persisted) {
// 页面从 BFCache 恢复 —— 此时需主动刷新时间相关逻辑
console.log('Restored from BFCache. Current time:', Date.now());
// ✅ 示例：更新所有动态时间显示
document.getElementById('current-timestamp').textContent = Date.now();
// ✅ 示例：重新初始化依赖实时时间的模块（如倒计时、心跳检测）
initRealTimeClock();
} else {
// 正常首次加载（非缓存）
console.log('Fresh load. Current time:', Date.now());
}
});
// 可选：同时监听 pagehide 防止资源泄漏（如清除旧定时器）
window.addEventListener('pagehide', function(event) {
if (event.persisted) {
// 清理可能干扰恢复后逻辑的状态（如 pending setTimeout/setInterval）
cleanupTimers();
}
});
⚠️ 重要注意事项：
- ❌ 不要依赖 DOMContentLoaded、load、$(document).ready() 或 setTimeout(..., 0) —— 它们在 BFCache 恢复时完全不会触发；
- ✅ pageshow 是唯一可靠的、能区分“首次加载”和“BFCache 恢复”的标准事件；
- ? 若业务强依赖绝对实时性（如金融交易倒计时、身份过期校验），可在 event.persisted === true 时调用 location.reload() 强制刷新，但会牺牲用户体验和性能，请谨慎权衡；
- ? 兼容性良好：Chrome ≥ 52、Firefox ≥ 1.5、Safari ≥ 11.1 均支持 pageshow 与 event.persisted。
总结：BFCache 是性能优化特性，而非 bug。开发者应主动适配，通过 pageshow + event.persisted 构建健壮的时间敏感逻辑，而非试图绕过或禁用缓存机制。
Java免费学习笔记：立即使用
解锁 Java 大师之旅：从入门到精通的终极指南
