浏览器 bfcache（往返缓存）详解与最佳实践

传统方式：点击后退 → 重新发送 HTTP 请求 → 下载 HTML/CSS/JS → 重新渲染 → 展示页面
         └── 整个过程可能耗时数百毫秒到数秒

bfcache：  点击后退 → 从内存中恢复页面快照 → 瞬间展示
         └── 几乎零延迟

// ❌ 这会阻止 bfcache
window.addEventListener('beforeunload', (event) => {
  event.preventDefault();
});

// ✅ 只在需要时才注册，不需要时及时移除

Cache-Control: no-store  /* 不仅 HTTP 缓存失效，也会影响 bfcache */

// ❌ unload 事件会降低 bfcache 命中率
window.addEventListener('unload', () => {
  // 清理操作...
});

window.addEventListener('pageshow', (event) => {
  if (event.persisted) {
    // 从 bfcache 中恢复
    console.log('🚀 页面从 bfcache 恢复');
    // 此时 DOM、滚动位置、JS 状态都已恢复
    // 但可能需要重新初始化某些资源
    refreshData();
  } else {
    // 首次加载
    console.log('🆕 页面首次加载');
    initializePage();
  }
});

window.addEventListener('pagehide', (event) => {
  if (event.persisted) {
    // 页面将被放入 bfcache
    console.log('💾 页面将被缓存到 bfcache');
  } else {
    // 页面将被销毁
    console.log('🗑️ 页面将被销毁');
  }
});

1. DOMContentLoaded
2. load
3. pageshow (persisted = false)

1. pageshow (persisted = true)    ← 瞬间触发，没有网络请求！

1. pagehide (persisted = true)    ← 页面要被放入 bfcache

1. pagehide (persisted = false)
2. beforeunload                   ← 如果有注册
3. unload                         ← 如果有注册

// ❌ 问题：从 bfcache 恢复后，数据可能已经过期
window.addEventListener('pageshow', (event) => {
  // 其他初始化代码...

  // 忘记处理 bfcache 恢复的场景
});

// ❌ 不推荐：只处理首次加载
window.addEventListener('load', () => {
  initializeApp();
});

// ✅ 推荐：同时处理首次加载和 bfcache 恢复
window.addEventListener('pageshow', (event) => {
  if (event.persisted) {
    // 从 bfcache 恢复：刷新数据
    console.log('从 bfcache 恢复，刷新数据');
    refreshData();
  } else {
    // 首次加载
    initializeApp();
  }
});

// ❌ 不推荐：unload 事件会阻止 bfcache
window.addEventListener('unload', () => {
  cleanupResources();
});

// ✅ 推荐：pagehide 不会阻止 bfcache
window.addEventListener('pagehide', () => {
  cleanupResources();
});

// ❌ 错误用法：发送分析数据
window.addEventListener('beforeunload', () => {
  navigator.sendBeacon('/api/analytics', data);
});

// ✅ 正确用法：使用 pagehide 或 Visibility API
window.addEventListener('pagehide', () => {
  navigator.sendBeacon('/api/analytics', data);
});

// 或者使用 Visibility API
document.addEventListener('visibilitychange', () => {
  if (document.visibilityState === 'hidden') {
    navigator.sendBeacon('/api/analytics', data);
  }
});

// 图片懒加载在 bfcache 恢复后可能需要重新触发
window.addEventListener('pageshow', (event) => {
  if (event.persisted) {
    // 重新触发图片懒加载
    const lazyImages = document.querySelectorAll('img[data-src]');
    lazyImages.forEach(img => {
      if (isElementInViewport(img)) {
        img.src = img.dataset.src;
      }
    });
  }
});

// 在生产环境中检测 bfcache 命中情况
window.addEventListener('pageshow', (event) => {
  if (event.persisted) {
    console.log('%c[bfcache] 命中！页面从缓存恢复', 'color: green; font-weight: bold');
  } else {
    console.log('%c[bfcache] 未命中，页面是新加载的', 'color: orange;');
  }
});

// 通过 Navigation Timing API 检测
const entries = performance.getEntriesByType('navigation');
entries.forEach(entry => {
  if (entry.type === 'back_forward') {
    console.log('⚠️ 这是通过前进/后退导航到此页面的');
    console.log(`  - 是否来自 bfcache: ${!triggeredByPopstate}`);
  }
});

// 用户浏览商品 → 查看详情 → 点击后退
// 有 bfcache：商品列表页瞬间恢复，滚动位置保留
// 无 bfcache：需要重新加载列表页，可能滚动到页面顶部

// 用户在文章列表中点击一篇文章 → 阅读 → 点击后退
// bfcache 保留了列表页的完整状态
// 包括：滚动位置、阅读进度、搜索关键词

// 用户填写表单 → 切换到其他标签页查资料 → 后退回来
// bfcache 保留了所有已填写的表单数据
// 用户不需要重新填写！