UD5工具箱
常见问题
以下是关于页面生命周期事件演示的常见问题解答。
什么是 Page Lifecycle API？
Page Lifecycle API 是浏览器提供的标准 API，用于监测页面的生命周期状态变化。它整合了 visibilitychange、focus、blur 等已有事件，并新增了 freeze 和 resume 事件，提供统一的接口来管理页面的可见性、活跃性和冻结状态。这个 API 帮助开发者正确处理后台标签页的行为，优化资源使用和用户体验。
freeze 和 resume 事件在什么场景下触发？
freeze 事件在浏览器冻结后台标签页时触发。当用户切换到其他标签页后，浏览器可能会在一段时间后冻结不活跃的标签页以释放系统资源。resume 事件在页面从冻结状态恢复时触发，通常发生在用户切换回被冻结的标签页时。这两个事件让开发者能够在页面被冻结前保存数据，在恢复后重新初始化操作。
visibilitychange 和 freeze 事件有什么区别？
visibilitychange 事件在页面可见性变化时触发（如切换标签页、最小化窗口），而 freeze 事件在浏览器决定冻结后台标签页时触发。visibilitychange 是立即触发的，而 freeze 可能在页面进入后台一段时间后才触发。此外，不是所有后台标签页都会被冻结，freeze 事件的触发取决于浏览器的优化策略和系统资源情况。
什么是 bfcache？
bfcache（Back/Forward Cache）是浏览器的一种优化机制，用于缓存用户导航离开的页面的完整状态。当用户使用前进/后退按钮导航时，浏览器可以直接从缓存中恢复页面，而无需重新加载。bfcache 可以显著提升页面导航速度。页面被存入 bfcache 时会触发 pagehide 事件（event.persisted 为 true），从缓存恢复时会触发 pageshow 事件。
Page Lifecycle API 的浏览器兼容性如何？
Page Lifecycle API 在现代浏览器中得到了良好支持。Chrome 68+、Edge 79+ 支持完整的 Page Lifecycle API（包括 freeze 和 resume 事件）。Firefox 和 Safari 对部分事件的支持可能有所不同。visibilitychange 和 pagehide/pageshow 事件在所有现代浏览器中都支持。建议在实际项目中使用特性检测来确保兼容性。
PWA 应用如何使用 Page Lifecycle API？
PWA（Progressive Web App）应用特别需要关注页面生命周期管理。当用户安装 PWA 并从主屏幕启动时，应用的生命周期与普通网页有所不同。PWA 应用应该正确处理 freeze/resume 事件来管理后台同步和推送通知。同时，PWA 应该监听 visibilitychange 事件来暂停和恢复实时数据更新，优化电池和数据使用。
pagehide 和 beforeunload 事件有什么区别？
pagehide 事件在页面即将被卸载或放入 bfcache 时触发，不会显示确认对话框。beforeunload 事件在页面即将被卸载时触发，通常用于显示确认对话框。现代浏览器对 beforeunload 的使用有严格限制，只在用户有未保存更改时才允许显示确认对话框。pagehide 事件更适合用于保存状态和清理资源，因为它更可靠且不会影响用户体验。
什么是 wasDiscarded 属性？
document.wasDiscarded 属性表示页面是否被浏览器丢弃。当浏览器内存不足时，可能会丢弃后台标签页的进程以释放内存。被丢弃的页面在用户切换回来时会重新加载，之前的 JavaScript 状态会丢失。wasDiscarded 属性可以帮助开发者识别这种情况，采取相应的恢复措施，如重新初始化应用状态或从服务器重新获取数据。