别再用unload了：拥抱浏览器生命周期API

站长

2023年09月07日 10:42 · 阅读数 10

以前的前端页面很少有涉及页面的生命周期相关的话题，我们最熟悉的还是这几个load, beforeunload, unload 事件，用来监听页面加载完、离开页面之前、页面卸载事件并做一些相应的处理，比如保存需要持久化的数据，或者上报一些埋点数据。首先我们先理下现有问题：

unload事件的问题

上面的这些事件(特别是unload)会有以下一些问题：

用户主动触发的事件，无系统自动触发的一些状态监控
无法稳定触发，特别是在手机端
前进/后退时无法进入浏览器缓存(back/forward cache)，导致用户来回切换时加载慢
用户离开时埋点数据可能无法稳定上报
无法追踪用户在页面上的完整生命周期

虽然现在计算机的算力硬件越来越强，但是现在我们同时需要处理的事情越来越多，开的Tab也就越来越多，一直被人诟病的比如chrome的疯狂吃内存的问题也很是头疼，接近顶配的电脑可能很快就被chrome给耗尽😂，所以现在的chrome版本会根据系统资源消耗程度来对不活动的Tab冻结或直接销毁来释放内存及减少电量的消耗。

针对这些问题现代浏览器提供了多个生命周期相关的事件来让开发者可以监听，并在触发时做相应处理。这里主要介绍几个最常用的而且对埋点相对比较重要的节点的生命周期事件。

页面是否可见: visibilitychange

visibilitychange事件涉及的场景会比较多，主要有用户切换tab、导航到其他页面、关闭Tab、最小化窗口、手机端切换app等，可在document上添加该事件，回调里通过document.visibilityState可以知道当前Tab是否隐藏了：

document.addEventListener(
    'visibilitychange',
    (e) => {
        const isTabVisible = document.visibilityState === 'visible'
        console.log('tab is visible: ', isTabVisible)
    },
    {
      capture: true,
    }
  )

以上事件需要在捕获阶段进行监听（包括下面讲到的其他相关事件），避免被业务代码阻止冒泡，而且有些是window层面的，没有冒泡的阶段，所以需要在capture阶段执行。

页面的加载与离开: pageshow/pagehide

首先，这事件名是真的很容易让人理解错😭（pageshow/pagehide感觉才是上面visibilitychange所表示的意义）。

pageshow主要在页面新加载或被浏览器冻结后重新解冻时触发, 可通过e.persisted来确定是如何加载的：

window.addEventListener(
  'pageshow',
  (e) => {
    // true 为之前冻结现在解冻，false相当于重新加载或新加载
    console.log('e.persisted: ', e.persisted)
  },
  {
    capture: true,
  }
)

pagehide本质上是对unload事件的真正替换且具有更稳定的触发时机，我们可以在这里对一些埋点事件或者其他一些小批量的数据进行上报(sendBeacon或fetch, 下面讲到)，这里还有个需要注意的是visibilitychange触发范围更广，也就是页面进来和离开时也会触发，和pageshow/pagehide同时触发（都触发时在这2个之前），所以如果业务需要区分页面离开还是用户仅仅是切换tab时，需要在不同的事件回调里做不同的处理。

页面离开时的数据上报

当需要在用户离开页面时(pagehide触发时)稳定的上报一些数据，我们一般会使用navigator.sendBeacon()方法:

// queued = true 说明浏览器接收请求，马上会上报出去，false的话可能业务要做其他处理
const queued = navigator.sendBeacon('/api', data)

当然sendBeacon有大小限制，一般在64KB以下，超出很可能会失败，所以我们在这里上报时要控制大小，如果数据量较大，建议提前上报一部分，比如在visibilitychange时（用户切换tab时）先上报一部分，确保只留64KB以下的数据放到最后。除了sendBeacon之外我们还可以用fetch上报，通过设置keepalive: true来达到sendBeacon一样的效果，当然也有一样的大小限制，这里可以做兼容处理：

function send(body) {
  if (navigator.sendBeacon) {
    navigator.sendBeacon('/api', body)
    return
  }
  fetch('/api', {
    body,
    method: 'POST',
    keepalive: true
  })
}

其他生命周期事件

除了上面常用的生命周期之外，浏览器的生命周期API还提供了页面的其他状态如：freeze, resume，freeze一般在用户导航到其他页面并且满足进入back/forward cache的条件时，或者用户在其他tab，浏览器根据系统资源自动使其进入冻结状态，当用户通过浏览器的返回按钮或重新切回到该Tab时，会触发resume事件说明页面继续，紧接着会触发pageshow事件，说明页面又进来了。关于更多的说明可以参考Page Lifecycle API

电脑息屏、休眠时

还有一些场景是电脑休眠或者只是关闭屏幕时，页面的生命周期以及页面里的一些定时器会有哪些变化？

休眠比较简单，定时器、网络连接这些都会被暂停，如果不想丢失数据，需要在pagehide做处理；息屏时可在document.visibilityState !== 'visible'时做处理，相当于页面不可见了，而且页面里的定时器不会被停掉但是可能会被浏览器延时处理，比如正常代码里是5s执行一次，此时可能会变成30s或者1min执行一次来节省资源。

总结

以上主要介绍了如何使用现代浏览器提供的生命周期API来在页面的不同阶段做相应的处理，pagehide事件主要用来替换unload, 关于beforeunload事件在有些应用中还是需要的，但是我们应该有选择性的添加该事件及在合适的时间移除监听该事件，比如未保存的数据已经保存完毕时可以移除，当又有新改动时再监听。

还有很多其他的生命周期事件可以让开发者能对用户在页面里/外的整个生命周期有更好的理解，以此来分析并提升网站的整体体验。笔者后面会写一篇如何跟踪用户在浏览器里的同一tab/不同tab之间的来回操作、记录并上报，并能够在后台进行session回放的文章，通过这些扩展能力相较于纯粹的埋点能更好地理解用户行为以此来优化产品体验🍻。