页面可见性API，解决H5端页面可见性监听的最终方案

 

一、简介

背景：

一般我们在进行前端页面开发时，对于用户正在离开页面。常用的方法是监听下面三个事件。

• pagehide
• beforeunload
• unload

但是，这些事件在手机上可能不会触发，页面就直接关闭了。因为手机系统可以将一个进程直接转入后台，然后杀死。

• 用户点击了一条系统通知，切换到另一个 App。
• 用户进入任务切换窗口，切换到另一个 App。
• 用户点击了 Home 按钮，切换回主屏幕。
• 操作系统自动切换到另一个 App（比如，收到一个电话）。

上面这些情况，都会导致手机将浏览器进程切换到后台，然后为了节省资源，可能就会杀死浏览器进程。

以前，页面被系统切换，以及系统清除浏览器进程，是无法监听到的。开发者想要指定，任何一种页面卸载情况下都会执行的代码，也是无法做到的。为了解决这个问题，就诞生了 Page Visibility API。不管手机或桌面电脑，所有情况下，这个 API 都会监听到页面的可见性发生变化。

意义：

这个新的 API 的意义在于，通过监听网页的可见性，可以预判网页的卸载，还可以用来节省资源，减缓电能的消耗。比如，一旦用户不看网