HTML怎么做阅读统计页_html阅读时长统计页面实现【解析】-html教程-PHP中文网

真实阅读时长需融合页面可见性、用户交互活跃度与滚动行为三重信号：用visibilitychange监听前台状态，结合scroll/mousemove/keydown重置30秒空闲计时器，以performance.now()获取高精度单调时钟，并用sendbeacon+session_id+localstorage缓存保障上报可靠性。

html怎么做阅读统计页_html阅读时长统计页面实现【解析】

如何用 JavaScript 监测用户真实阅读时长

纯靠 onload 或页面停留时间（visibilitychange）算出的“阅读时长”基本不可信——用户切到其他标签页、锁屏、甚至只是盯着页面发呆，都会被计入。真实阅读需结合「页面可见性 + 用户交互活跃度 + 滚动行为」三重信号。

实操建议：

用 document.hidden 和 visibilitychange 事件判断页面是否在前台，隐藏时暂停计时器
用 setTimeout 配合 scroll、mousemove、keydown 等事件重置空闲计时器（例如 30 秒无操作即判定为“未阅读”）
避免监听 input 或 click——表单填写或点广告也会触发，干扰阅读判断
起始计时点不应是 DOMContentLoaded，而应是首次滚动/聚焦后 2 秒（排除误进页面场景）

为什么 `performance.now()` 比 `Date.now()` 更适合计算阅读耗时

Date.now() 返回的是系统时间戳，受用户手动调时、NTP 同步影响，可能出现倒退或跳变；而 performance.now() 是高精度单调递增时钟，单位为毫秒且小数精度达微秒级，专为性能测量设计。

示例关键逻辑：

let startTime = performance.now();
let lastActive = startTime;
const IDLE_THRESHOLD = 30_000; // 30秒无交互视为闲置
<p>function updateActivity() {
lastActive = performance.now();
}</p><p>window.addEventListener('scroll', updateActivity, { passive: true });
window.addEventListener('mousemove', updateActivity, { passive: true });
window.addEventListener('keydown', updateActivity);</p><p>function getReadingTime() {
const now = performance.now();
if (document.hidden) return 0;
return Math.max(0, now - startTime - (now - lastActive > IDLE_THRESHOLD ? now - lastActive : 0));
}</p>

上报阅读数据时怎么避免重复提交或丢失

用户可能中途关闭页面、刷新、或网络临时中断，直接在 beforeunload 里发 fetch 请求极易失败（浏览器会取消未完成的请求），且同一页面多次打开会导致多条记录叠加。

Article To Html

文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。

下载

可靠做法：

使用 navigator.sendBeacon() 替代 fetch —— 它异步发送且不阻塞页面卸载，兼容性到 Chrome 39+/Firefox 31+
为每次阅读会话生成唯一 session_id（可用 crypto.randomUUID() 或时间戳+随机数），服务端按该 ID 去重
本地 localStorage 缓存未上报的阅读时长，在页面重新加载时检查并补报（需加时间窗口限制，如只补报过去 5 分钟内的）
避免在 visibilitychange 切到 hidden 时立刻上报——用户只是切个微信回个消息，真正离开前可能还会回来