前端与浏览器 / 进阶

页面生命周期：visibilitychange、pagehide 与 bfcache

解释页面可见性、冻结、销毁和往返缓存，可靠保存草稿与发送末尾统计。用户离开页面时，beforeunload 往往不是你以为的最后机会。

9 分钟Page Lifecycle · bfcache · visibilitychange · Beacon

bfcache 是完整页面快照

浏览器前进或后退时可能直接恢复页面，JavaScript 堆和 DOM 都被保留，不会重新执行普通初始化。pageshow 事件的 persisted 可判断是否从 bfcache 恢复。恢复后要重新校验易过期数据、重连实时通道，并避免重复注册监听器。不要无条件监听 unload，它可能让页面失去 bfcache 资格。

EXAMPLE / 01Page Lifecycle

document.addEventListener('visibilitychange', () => {
  if (document.visibilityState !== 'hidden') return;
  saveDraftLocally(editor.getValue());
  navigator.sendBeacon('/analytics/session-end', JSON.stringify({
    path: location.pathname,
    duration: performance.now()
  }));
});

把实现拆成可验证的小块

bfcache 恢复不是一次全新加载

最后回到真实页面检查

持续保存比离开页面时抢救更可靠