最轻量可靠的方式是用performance.now()捕获脚本首行执行时间点，再通过setInterval每500ms重新计算毫秒差并转为“X天X小时X分X秒”格式更新textContent。
直接用 JavaScript 计算页面加载到当前的毫秒差，再转成“X天X小时X分X秒”格式并持续更新，是最轻量、最可靠的方式。不需要服务端参与，也不依赖系统时间同步精度。
用 performance.now() + setInterval 精确计时
页面启动时间点必须在脚本执行第一时间捕获，performance.now() 比 Date.now() 更精准（毫秒级且不受系统时钟跳变影响）。之后每秒用差值计算运行时长。
- 把
const startTime = performance.now();放在<script>最开头，确保最早执行 - 更新函数里用
performance.now() - startTime得到毫秒数，再换算成天/小时/分钟/秒 - 避免用
setInterval(fn, 1000)直接累加秒数——它会漂移，必须每次重新算总差值 - 示例片段：
const startTime = performance.now(); function updateUptime() { const ms = performance.now() - startTime; const sec = Math.floor(ms / 1000) % 60; const min = Math.floor(ms / 60000) % 60; const hr = Math.floor(ms / 3600000) % 24; const day = Math.floor(ms / 86400000); document.getElementById('uptime').textContent = `${day}天${hr}小时${min}分${sec}秒`; } setInterval(updateUptime, 500); // 半秒更新一次，避免秒数卡顿
为什么不用 Date.now() 或服务器时间？
Date.now() 依赖用户设备系统时间，如果用户手动调快/调慢，运行时间就会错乱；服务器时间需额外 HTTP 请求，增加延迟和失败风险，且对静态页不友好。
- 纯前端方案必须基于“页面开始执行那一刻”，
performance.now()是唯一标准答案 - 若页面有骨架屏或懒加载逻辑，仍以 JS 执行起点为准，不是 DOMContentLoaded 或 load 事件
- 注意：Safari 旧版本对
performance.now()的起始点定义略有差异，但对运行时长计算无实质影响
显示位置与 DOM 更新优化
用 textContent 替代 innerHTML，既防 XSS 又快。目标元素建议用 <span id="uptime"></span> 这类内联标签，避免重排。
立即学习“前端免费学习笔记（深入）”；
- 不要把运行时间塞进
<time datetime="">，它的datetime属性只接受标准时间戳，不适合存相对时长 - 如果页面可能长时间后台运行（比如标签页切走），可监听
visibilitychange事件暂停更新，节省资源 - 首次渲染前给元素设个占位文本，如
<span id="uptime">0天0小时0分0秒</span>，避免 FOUC
真正要注意的是起点捕获时机——哪怕晚执行 10ms，一天后误差就超过 800ms。所以那行 performance.now() 必须是整个脚本第一句，别被任何条件或 async 模块挡住。
