本文介绍一种基于 load 和 beforeunload 事件的高效页面停留时间追踪方法，避免轮询计时器导致的时间漂移，确保毫秒级精度，并通过 localStorage 持久化分段统计。
本文介绍一种基于 `load` 和 `beforeunload` 事件的高效页面停留时间追踪方法，避免轮询计时器导致的时间漂移，确保毫秒级精度，并通过 `localstorage` 持久化分段统计。
要准确记录用户在网站不同功能区（如购物页、关于页、图片页等）的实际停留时长，关键在于规避主动轮询计时器（如 setInterval）带来的累积误差与资源开销。原代码中每秒读取时间差并累加的方式，不仅因 JavaScript 单线程调度和事件循环延迟造成明显“2秒现实 ≈ 1秒记录”的失真，还存在页面跳转时定时器未及时清理、跨页状态丢失等问题。
正确的思路是：每个页面独立启动并终止一次计时，仅记录“进入 → 离开”这一完整生命周期的精确耗时。这可通过浏览器原生事件天然实现：
- ✅
load事件：页面完全加载后立即触发，作为计时起点； - ✅
beforeunload事件：用户即将离开当前页面（含跳转、刷新、关闭）前触发，作为计时终点； - ✅ 时间差直接用
new Date().getTime()相减，单位为毫秒，零误差、无延迟。
以下为适用于任意目标页面（如 ? 关键实践要点： 最后，在 该方案轻量、精准、健壮，完美适配单页应用（SPA）以外的传统多页网站（MPA）架构，是用户行为时长追踪的推荐实践。shopping.html）的精简追踪脚本（建议置于 或 底部）：<script>
let startTime = 0;
// 页面加载完成即开始计时
window.addEventListener('load', () => {
startTime = Date.now();
});
// 页面卸载前保存本次停留时长（单位：毫秒）
window.addEventListener('beforeunload', () => {
const durationMs = Date.now() - startTime;
// 使用页面标识符（如 'shopping'）作为 key，避免冲突
const pageKey = 'time_spent_shopping'; // 替换为当前页面唯一标识
const existing = parseInt(localStorage.getItem(pageKey) || '0', 10);
localStorage.setItem(pageKey, (existing + durationMs).toString());
});
</script>
localStorage key（例如 time_spent_shopping、time_spent_about），确保数据隔离； beforeunload 是唯一可靠捕获“离开”动作的时机，visibilitychange 或 pagehide 可作为补充（处理后台标签页场景），但非必需； setInterval、无需手动维护定时器引用、无需跨页面通信——每个页面自治，彻底消除时间漂移根源； localStorage 已满足基础需求。tracker.html 中读取并汇总所有页面时长（示例）：function formatDuration(ms) {
const sec = Math.floor(ms / 1000);
return `${Math.floor(sec / 3600)}h ${Math.floor((sec % 3600) / 60)}m ${sec % 60}s`;
}
const pages = [
{ id: 'shopping', label: 'Shopping' },
{ id: 'about', label: 'About' },
{ id: 'pictures', label: 'Pictures' }
];
pages.forEach(({ id, label }) => {
const ms = parseInt(localStorage.getItem(`time_spent_${id}`) || '0', 10);
console.log(`${label}: ${formatDuration(ms)}`);
});
