使用window.beforeunload与window.onload计算用户页面停留时长

为啥你的代码没效果？ #

你的代码主要卡两个关键点：

1. 浏览器拦截onbeforeunload内的弹窗：现代浏览器出于用户体验和安全限制，会直接阻止onbeforeunload事件里的alert()执行，所以你看不到停留时长的弹窗，自然无法确认计算结果。
2. 未覆盖异常场景：如果页面崩溃、浏览器被强制关闭，onbeforeunload不会触发，导致时长数据直接丢失。

修复后的代码 #

把弹窗替换为更可靠的调试或存储方式，调整逻辑如下：

var pageLoadTime;

window.onload = function() {
  // 记录页面加载完成的时间戳（毫秒）
  pageLoadTime = Date.now();
  // 用控制台输出调试信息，避免alert干扰流程
  console.log("页面加载完成时间戳：", pageLoadTime);
};

window.onbeforeunload = function() {
  if (!pageLoadTime) return;
  // 计算页面停留时长（毫秒）
  const stayDuration = Date.now() - pageLoadTime;
  // 控制台查看结果，或存储到本地/上报后端
  console.log("页面停留时长：", stayDuration + "毫秒");
  localStorage.setItem("pageStayDuration", stayDuration);
  // 若需上报到New Relic，取消下方注释
  // newrelic.setCustomAttribute('pageStayDuration', stayDuration);
  
  // 注意：此事件内禁止使用alert/confirm/prompt，浏览器会直接拦截
};

额外优化技巧 #

• 统计有效停留时长：用户切换标签页时暂停计时，切回后继续，更精准统计实际浏览时长：

  let isPageVisible = true;
  let totalStayTime = 0;
  let lastPauseTime;
  
  document.addEventListener("visibilitychange", function() {
    if (document.hidden) {
      // 页面隐藏时记录暂停时间
      isPageVisible = false;
      lastPauseTime = Date.now();
    } else {
      // 页面恢复显示时，累加暂停期间的时长
      isPageVisible = true;
      if (lastPauseTime) {
        totalStayTime += Date.now() - lastPauseTime;
        lastPauseTime = null;
      }
    }
  });
  
  window.onbeforeunload = function() {
    const finalDuration = totalStayTime + (Date.now() - pageLoadTime);
    console.log("有效停留时长：", finalDuration + "毫秒");
    localStorage.setItem("effectiveStayDuration", finalDuration);
  };
  

• 兜底上报方案：部分场景下onbeforeunload可能不触发，搭配unload事件并使用navigator.sendBeacon确保数据上报：

  window.addEventListener("unload", function() {
    const stayDuration = Date.now() - pageLoadTime;
    // sendBeacon可在页面卸载时异步发送数据，不会阻塞页面关闭
    navigator.sendBeacon("/api/report-stay-time", JSON.stringify({ duration: stayDuration }));
  });
  

内容的提问来源于stack exchange，提问作者Salman