页面生命周期 API

Browser Support

  • Chrome: 68.
  • Edge: 79.
  • Firefox: not supported.
  • Safari: not supported.

如今,当系统资源受限时,现代浏览器有时会暂停网页或完全舍弃网页。未来,浏览器希望主动执行此操作,从而减少电量和内存消耗。Page Lifecycle API 提供生命周期钩子,以便网页能够安全地处理这些浏览器干预,而不会影响用户体验。查看该 API,了解您是否应在应用中实现这些功能。

背景

应用生命周期是现代操作系统管理资源的一种重要方式。在 Android、iOS 和新近的 Windows 版本中,应用可以随时由操作系统启动和停止。这样一来,这些平台就能优化资源并将其重新分配到最能让用户受益的地方。

在 Web 上,历史上一直没有此类生命周期,应用可以无限期保持活跃状态。在大量网页运行的情况下,内存、CPU、电池和网络等关键系统资源可能会过度订阅,从而导致最终用户体验不佳。

虽然 Web 平台长期以来一直有与生命周期状态相关的事件(例如 loadunloadvisibilitychange),但这些事件仅允许开发者响应用户发起的生命周期状态变化。为了使 Web 在低功耗设备上可靠运行(并在所有平台上更节省资源),浏览器需要一种方法来主动回收和重新分配系统资源。

事实上,现在的浏览器已经采取积极措施来节省后台标签页的资源,许多浏览器(尤其是 Chrome)希望在这方面做得更好,以减少其总体资源占用量。

问题在于,开发者无法为这些系统发起的干预做好准备,甚至不知道这些干预正在发生。这意味着,浏览器需要保持保守,否则可能会破坏网页。

页面生命周期 API 尝试通过以下方式解决此问题:

  • 在 Web 上引入并标准化生命周期状态的概念。
  • 定义新的系统启动状态,使浏览器能够限制隐藏或非活动标签页可消耗的资源。
  • 创建新的 API 和事件,使 Web 开发者能够响应向这些新的系统启动状态的过渡以及从这些状态的过渡。

此解决方案可提供 Web 开发者所需的预测能力,以便构建可应对系统干预的弹性应用,并允许浏览器更积极地优化系统资源,最终让所有 Web 用户受益。

本文的其余部分将介绍新的页面生命周期功能,并探讨它们与所有现有的 Web 平台状态和事件有何关系。此外,它还会针对开发者在每种状态下应该(和不应该)执行的工作类型提供建议和最佳实践。

页面生命周期状态和事件概览

所有网页生命周期状态都是离散的且互斥的,这意味着网页一次只能处于一种状态。并且,网页生命周期状态的大多数变化通常都可以通过 DOM 事件观察到(例外情况请参阅针对每种状态的开发者建议)。

或许最简单的方法就是通过图表来解释网页生命周期状态以及指示状态之间转换的事件:

直观地展示了本文档中描述的状态和事件流。
页面生命周期 API 状态和事件流。

下表详细介绍了每种状态。它还列出了可能的前后状态,以及开发者可用于观察变化的事件。

说明
有效

如果网页可见且具有输入焦点,则该网页处于活动状态。

可能的先前状态
被动 (通过 focus 事件)
冻结 (通过 resume 事件,然后通过 pageshow 事件)

可能的下一个状态
被动 (通过