JS44 页面生命周期

新的API

W3C指定了Page Lifecycle API，统一了网页从诞生到卸载的行为模式，并且定义了新的事件，允许开发者响应网页状态的各种转换。

生命周期

网页的生命周期被分为了六个阶段，每个时刻只可能处于其中一个阶段。

（1）Active 阶段

网页处于可见状态，且拥有输入焦点。

（2）Passive阶段

此阶段网页可见，但是没有输入焦点，无法接受输入。UI更新（比如动画）仍然在执行。

（3）Hidden阶段

此阶段用户的桌面被其他窗口占据，网页不可见，当尚未冻结。UI更新不再执行。

（4）Terminated阶段

由于用户主动关闭窗口或者在同一个窗口但前往其他页面，导致当前页面被浏览器卸载并从内存中清除，页面进入此阶段。

这个阶段总是在Hidden阶段之后发生，此阶段不会自动任何新任务，正在进行的任务可能会被终止。

（5）Frozen阶段

页面处于Hidden阶段时间过长，但网页一直未关闭，页面会被冻结，进入Frozen阶段。也有可能处于可见状态的页面长时间没有操作，也会进入Frozen阶段。

这个阶段，网页不会再被分配CPU资源，定时器、回调函数、网络请求、DOM操作都不会执行，但是正在执行的任务会被执行完。浏览器可能会允许Frozen阶段的页面，周期性复苏一小段时间，短暂变回Hidden阶段，允许一小部分任务执行。

（6）Discarded阶段

网页长时间处于Frozen阶段，用户未唤醒页面，就会进入Discarded阶段。此阶段浏览器自动卸载网页，清楚网页内存占用。Passive阶段的网页如果长时间没有互动，也可能直接进入Discarded阶段。

这个阶段一般是系统强制执行，任何新任务和JavaScript代码都不能执行。

网页Discarded周，Tab窗口还在，如果用户重新访问Tab，浏览器会重新向服务器发出请求，再次加载网页，回到Active阶段

常见场景

（1）用户打开网页，切换到其他App，过了一会又重新回到网页

Active → Hidden → Active

（2）用户打开网页，切换到其他App，并且长时间使用后者，导致系统自动丢弃网页

Active → Hidden → Frozen → Discarded

（3）用户打开网页，切换到其他App，然后在任务管理器中将浏览器进程清楚。

Active → Hidden → Terminated

（4）系统丢弃了某个Tab里面的页面后，用户重新打开这个Tab

Discarded → Active

事件

网页的生命周期是在所有帧触发，不管是底层的帧，还是内嵌的帧。也就是说，内嵌的