无需登录 数据私有 本地保存

页面生命周期事件演示 - freeze/resume等

73
0
0
0

专业术语表

以下是与页面生命周期相关的专业术语解释。

Page Lifecycle API 是浏览器提供的标准 API,用于监测页面的生命周期状态变化。它整合了多个已有的浏览器事件(如 visibilitychange、focus、blur)和新增的事件(如 freeze、resume),提供了一套统一的接口来管理页面的可见性、活跃性和冻结状态。这个 API 对于构建需要处理后台标签页的 Web 应用非常有用。

freeze 事件在浏览器冻结后台标签页时触发。冻结是浏览器的一种优化措施,当标签页长时间处于后台不活跃状态时,浏览器会暂停页面的 JavaScript 执行、定时器和网络请求,以释放系统资源。被冻结的页面会保持当前状态,直到用户切换回该标签页或浏览器主动恢复。freeze 事件让开发者有机会在页面被冻结前保存重要数据。

resume 事件在页面从冻结状态恢复时触发。当用户切换回被冻结的标签页,或者浏览器决定恢复被冻结的页面时,会触发此事件。开发者可以监听 resume 事件来恢复之前暂停的操作,如重新开始定时器、恢复数据同步或刷新页面内容。resume 事件标志着页面重新进入活跃状态。

visibilitychange 事件在页面的可见性发生变化时触发。当用户切换到其他标签页、最小化浏览器窗口或切换回当前标签页时,都会触发此事件。通过 document.hidden 属性可以判断页面当前是否可见。visibilitychange 事件是最常用的生命周期事件之一,通常用于暂停/恢复动画、停止/启动数据轮询等场景。

bfcache 是浏览器的一种优化机制,用于缓存用户导航离开的页面的完整状态。当用户使用前进/后退按钮导航时,浏览器可以直接从缓存中恢复页面,而无需重新加载。bfcache 可以显著提升页面导航的速度和用户体验。页面被存入 bfcache 时会触发 pagehide 事件,从缓存中恢复时会触发 pageshow 事件。

document.wasDiscarded 属性表示页面是否被浏览器丢弃(discarded)。当浏览器内存不足时,可能会丢弃后台标签页的进程以释放内存。被丢弃的页面在用户切换回来时会重新加载。wasDiscarded 属性可以帮助开发者识别这种情况,并采取相应的恢复措施,如重新初始化应用状态或从服务器重新获取数据。

pagehide 事件在页面即将被卸载或放入 bfcache 时触发。与 beforeunload 事件不同,pagehide 事件在页面实际卸载前触发,且不会显示确认对话框。开发者可以使用 pagehide 事件来保存页面状态或清理资源。pagehide 事件的 event.persisted 属性表示页面是否被放入 bfcache,而不是被完全卸载。

beforeunload 事件在页面即将被卸载时触发。通常用于在用户离开页面前显示确认对话框,防止用户意外丢失未保存的数据。然而,现代浏览器对 beforeunload 事件的使用有严格限制,滥用会影响用户体验和页面性能。建议只在确实需要用户确认的场景(如未保存的表单数据)中使用 beforeunload 事件。