小程序中的pageshow与pagehide事件，HTML5中也有？揭秘浏览器往返缓存（BFCache）

在Web开发的世界里，浏览器缓存一直是一个神秘而高效的工具。它能让用户快速返回上一页，仿佛网页从未关闭过。而这一切的背后，离不开两个"低调却关键"的HTML5事件：pageshow和pagehide。它们不仅是浏览器缓存（BFCache）机制的核心，更是开发者优化性能、管理状态的利器。本文将带你深入浅出地了解这两个事件，揭开它们的神秘面纱。

---

一、什么是pageshow和pagehide事件？

1.1 pageshow事件

pageshow事件在页面显示 时触发，无论页面是全新加载还是从浏览器缓存（BFCache）中恢复。

• 触发场景 ：
  • 用户首次访问页面时（触发load事件后触发pageshow）。
  • 用户通过浏览器的"后退"或"前进"按钮返回页面时（页面从BFCache中恢复，此时不会触发load事件）。
• 关键属性 ：
  • event.persisted：布尔值。如果页面来自BFCache，该值为true；否则为false。

1.2 pagehide事件

pagehide事件在用户离开当前页面时触发，前提是浏览器的历史记录发生变化（例如点击链接跳转）。

• 触发场景 ：
  • 用户导航到其他页面（如点击超链接）。
  • 用户关闭标签页或刷新页面（但不会触发pagehide）。
• 关键属性 ：
  • event.persisted：如果页面被缓存（进入BFCache），该值为true；否则为false。

---

二、为什么这两个事件如此重要？

2.1 与BFCache的紧密关系

浏览器的"往返缓存"（Back-Forward Cache, BFCache）是提升用户体验的关键技术。当用户通过"后退"或"前进"按钮返回页面时，浏览器会直接从内存中恢复整个页面的状态（包括DOM、JavaScript变量、滚动位置等），而无需重新加载资源。

• pageshow的作用 ：
  当页面从BFCache中恢复时，pageshow事件会通知开发者页面已"复活"，此时可以重新初始化组件或恢复用户状态。
• pagehide的作用 ：
  当用户离开页面时，pagehide事件会告知开发者页面即将被缓存或销毁，此时可以清理资源或保存状态。

2.2 与load和unload的区别

• load事件：仅在页面首次加载时触发，不会在从BFCache恢复时触发。

• unload事件：在页面卸载时触发，但不会在BFCache中触发（因为页面未被销毁）。

• 对比总结 ：

  事件	触发时机	是否支持BFCache场景
  pageshow	页面显示时（首次加载或从缓存恢复）	✅
  pagehide	页面隐藏时（离开页面）	✅
  load	页面首次加载完成	❌
  unload	页面卸载时	❌

---

三、如何使用pageshow和pagehide？

3.1 基础用法

// 监听pageshow事件
window.addEventListener('pageshow', (event) => {
  if (event.persisted) {
    console.log('页面从BFCache中恢复！');
  } else {
    console.log('页面首次加载');
  }
});

// 监听pagehide事件
window.addEventListener('pagehide', (event) => {
  if (event.persisted) {
    console.log('页面将被缓存到BFCache');
  } else {
    console.log('页面将被销毁');
  }
});

3.2 应用场景示例

场景1：恢复用户状态

假设用户在页面中填写了一个表单，但突然关闭了页面。如果页面被缓存，用户返回时可以通过pageshow事件恢复表单数据：

window.addEventListener('pageshow', (event) => {
  if (event.persisted) {
    // 从缓存中恢复表单数据
    document.getElementById('myForm').value = cachedFormData;
  }
});

场景2：优化性能

在单页应用（SPA）中，pageshow和pagehide可以帮助开发者管理组件生命周期：

window.addEventListener('pagehide', () => {
  // 停止动画或定时器
  clearInterval(myInterval);
});

window.addEventListener('pageshow', (event) => {
  if (event.persisted) {
    // 重新启动动画或定时器
    myInterval = setInterval(updateAnimation, 100);
  }
});

---

四、使用技巧与注意事项

4.1 注意事件触发顺序

• 首次加载 ：DOMContentLoaded → load → pageshow。
• 从BFCache恢复 ：pageshow → DOMContentLoaded（不触发load）。

4.2 避免误用unload事件

如果页面注册了unload事件处理程序，即使为空函数，浏览器也会禁止该页面进入BFCache 。这是为了避免页面状态不一致（例如跳过load事件直接恢复）。因此，尽量避免使用unload，改用pagehide。

4.3 兼容性问题

• BFCache支持：Firefox、Safari、Opera支持BFCache，Chrome和Edge早期版本也支持，但现代浏览器可能因性能优化而限制其使用。
• persisted属性：所有主流浏览器均支持，但需注意部分旧版本可能未实现。

4.4 避免在pagehide中执行耗时操作

pagehide事件的监听函数应尽量简洁，避免执行复杂的计算或网络请求。浏览器可能在页面缓存前终止长时间运行的脚本。

---

五、总结：为什么你应该关注这两个事件？

1. 性能优化：利用BFCache机制，大幅减少页面加载时间。
2. 状态管理：在页面恢复时自动恢复用户操作，提升用户体验。
3. 资源控制：在页面隐藏时释放资源，避免内存泄漏。

pageshow和pagehide事件看似低调，却是Web性能优化和用户体验设计的"隐形功臣"。掌握它们，不仅能让你的网页在浏览器缓存中"复活"，还能为用户带来更流畅的交互体验。下次打开浏览器时，不妨用开发者工具观察这些事件的触发过程，感受它们的魔力吧！