统计浏览器页面停留时长

思路

1. 在用户打开页面时（如使用window.onload或DOMContentLoaded事件）启动一个JavaScript计时器。
2. 在用户离开页面时（如使用window.onbeforeunload或window.onunload事件）停止计时器，并计算时间差作为页面停留时长。
3. 当页面被切换Tab或最小化时停止计时，返回时继续计时：使用Page Visibility API的document.visibilityState属性和visibilitychange事件，检测页面是否对用户可见。

代码

let startTime = null;  
let elapsedTime = 0; // 累计停留时间（毫秒）  
  
const startTimer = () => {  
    if (!startTime) {  
        startTime = Date.now(); // 记录开始时间  
    }  
}  
  
const updateTime = () => {  
    if (document.visibilityState === 'visible') {
        // 恢复可见时更新startTime的值
        startTime = Date.now();
    } else {  
        // 不可见时记录上次可见时间段
        elapsedTime += (Date.now() - startTime);  
    }  
}  

const displayElapsedTime = () => {  
    console.log(`页面总停留时间: ${(elapsedTime + Date.now() - startTime ) / 1000} 秒`);  
} 
  
// 当页面可见性发生变化时触发  
document.addEventListener('visibilitychange', updateTime);  
  
// 页面加载完成时开始计时  
window.onload = startTimer;  
  
// 离开页面时计算停留时长 
window.onbeforeunload = displayElapsedTime;