前端如何统计用户在一个页面上的停留时长？

前面笔者写了一篇关于前端如何对点位的 click 事件和 impression 事件埋点的文章 浅谈前端如何做无痕埋点？前端的埋点不仅仅是这两个事件埋点，此外还有 uv（user view，即多少用户访问了当前页面）、pv（page view，即当前页面被访问了多少次）、用户停留时长。今天我们来聊聊如何计算用户在页面上的停留时长。

需求分析

要统计停留时长，我们需要知道以下两点信息：

• 用户进入页面的时间 entryTime
• 用户离开页面的时间 leaveTime

则用户停留时长 stayTime = leaveTime - entryTime

如何判定用户进入页面？

1、DOMContentLoaded 事件或 onload 事件

用户访通过 url 访问一个页面，页面会开始加载对应的 html 文件，html 文件中如果有 css、js、图片等其他资源文件，则会对这些文件发起请求，最后渲染出完整的页面展示给用户。在这个过程中，会触发两个事件：DOMContentLoaded 和 onload。

DOMContentLoaded 事件在 html 文件加载并解析完成后触发，此时页面上的其他资源（图片、css等）可能未加载完成；onload 事件会在页面上所有的资源都加载完成后触发，包括 html、图片、css等等。所以事件触发顺序是：DOMContentLoaded -> onload，所以我们可以在两个事件中的任何一个记录用户进入页面的时间，看具体需求。代码如下：

let entryTime,leaveTime
window.addEventListener('DOMContentLoaded',function() {
   // 进入页面的时间戳
   entryTime = new Date().getTime()
 })
 // 或
 window.addEventListener('load',function() {
   // 进入页面的时间戳
   entryTime = new Date().getTime()
 })

2、pageshow 事件

顾名思义，pageshow 事件就是在页面可见的时候触发（即页面第一次加载和刷新时触发），代码如下：

window.addEventListener('pageshow', function() {
   // 进入页面的时间戳
   entryTime = new Date().getTime()
})

如何判定用户离开页面？

1、unload 事件

当用户关闭当前页面时会触发 **unload **事件，我们可以在 unload 事件中记录用户离开时的时间戳，代码如下：

 window.addEventListener('unload',function() {
  // 离开页面的时间戳
   leaveTime = new Date().getTime()
 })
 

2、pagehide 事件

顾名思义，pagehide 事件就是在页面不可见的时候触发，即用户点击跳转其它链接、浏览器前进、后退按钮，或者关闭浏览器选项卡时触发，代码如下：

window.addEventListener('pagehide',function() {
  // 离开页面的时间戳
   leaveTime = new Date().getTime()
})

拓展

上面讲述了打开页面和离开页面会触发的一些事件，此外还有一个 visibilitychange 事件可以监听页面的显示和隐藏，可以在回调函数中通过一个 visibilityState 属性来标识页面的状态。

• visibilityState = ‘visible’，页面可见
• visibilityState = ‘hidden’，页面不可见

代码如下：

window.addEventListener('visibilitychange',function(e) {
    if (e.target.visibilityState === 'visible') {
      console.log('visible')
    } else if (e.target.visibilityState === 'hidden') {
      // 离开页面的时间戳
      leaveTime = new Date().getTime()
    }
    
})

这里需要注意的时，我们不能在 e.target.visibilityState === ‘visible’ 分支里记录用户进入页面的时间，因为一开始进入页面的时候，visibilitychange 事件并不会触发，只有当我们切换浏览器 tab、最小化浏览器窗口、打开新页面时才会触发。