pageshow 和 pagehide 事件在前端开发中主要用于处理页面在浏览器中的可见性变化，与用户的直接交互关系不大，更多的是关注页面自身的状态。它们比 visibilitychange 事件更专注于页面本身的加载和卸载状态，而 visibilitychange 则关注页面的可见性，例如用户切换标签页或最小化浏览器。
以下是 pageshow 和 pagehide 的一些应用场景：
-
恢复页面状态： 当用户使用浏览器的前进后退按钮或者从浏览器历史记录中访问页面时，会触发
pageshow事件。这时可以使用该事件来恢复页面的状态，例如：- 恢复之前填写但未提交的表单数据。
- 恢复页面的滚动位置。
- 重新启动被暂停的动画或视频播放。
- 重新连接 WebSocket 或其他长连接。
-
清理页面资源： 当用户离开页面时，会触发
pagehide事件。这时可以使用该事件来清理页面资源，例如：- 关闭或取消未完成的异步请求，避免浪费资源。
- 解除事件绑定，防止内存泄漏。
- 断开 WebSocket 或其他长连接。
- 停止计时器或动画。
-
分析用户行为： 虽然不如专门的分析工具强大，但
pageshow和pagehide可以用来记录用户在页面停留的时间，以及用户是通过前进/后退按钮还是直接访问进入页面的。 配合performance.navigation.type可以区分页面加载方式，从而更精确地进行统计。 -
配合
persisted属性优化用户体验：pageshow事件的event.persisted属性可以用来判断页面是否是从缓存中加载的 (Back-Forward Cache, BF Cache)。如果是，则可以避免重复执行一些初始化操作，从而提升页面加载速度和用户体验。 例如，如果页面是从 BF Cache 中加载的，就无需重新发送 Ajax 请求获取数据。 -
单页应用 (SPA) 路由管理： 在 SPA 中，页面不会完全刷新，因此
pageshow和pagehide可以用来模拟页面生命周期，执行一些类似于组件的mounted和unmounted的逻辑。
pageshow 和 pagehide vs. unload 和 load
pageshow 和 pagehide 与 unload 和 load 容易混淆，但它们有重要的区别：
- BF Cache:
pageshow和pagehide会在页面从 BF Cache 中加载或卸载时触发，而unload和load则不会。 - 页面刷新:
unload和load会在页面刷新时触发，而pageshow和pagehide则只会在页面前进/后退或关闭时触发。
示例：
window.addEventListener('pageshow', function(event) {
if (event.persisted) {
console.log('页面从缓存中加载');
// 从缓存中恢复页面状态
} else {
console.log('页面重新加载');
// 初始化页面
}
});
window.addEventListener('pagehide', function(event) {
console.log('页面即将卸载');
// 清理页面资源
});
总之，pageshow 和 pagehide 事件为开发者提供了更细粒度的控制，可以更好地管理页面生命周期，优化用户体验，并实现一些特殊的功能。 理解它们与其他类似事件的区别，才能更好地运用它们。