真正稳定的时间渲染需用 requestAnimationFrame + 时间差校准，避免 setInterval 失真；采用等宽数字字体、固定容器宽度，并在页面可见性切换时补足时间差。
直接用 setInterval 每秒更新一次，时间显示必然跳变、卡顿、偶尔漏帧——这不是“不失真”，只是“看起来差不多”。真正稳定的时间渲染，核心不在刷新频率，而在**避免重排重绘、对齐浏览器帧节奏、隔离 DOM 更新时机**。
为什么 setInterval(new Date(), 1000) 会失真
主线程阻塞时，setInterval 的回调可能延迟执行；即使准时触发，new Date() 取到的时间戳也未必是“整秒时刻”，导致秒数显示滞后或重复（比如连续两帧都显示 12:53:24）。更糟的是，频繁写入 innerHTML 会强制触发样式计算与布局，放大抖动。
- 浏览器实际刷新率不一定是 60fps，
setInterval(1000)和屏幕帧不同步 -
new Date()返回的是调用瞬间的时间，不是“下一秒开始时刻” - 每次更新都走完整 DOM 流程，哪怕内容没变，也会触发 layout → paint
用 requestAnimationFrame + 时间差校准才是真稳定
让时间更新和浏览器重绘强绑定，只在真正要画帧前读取时间，并按需更新。关键不是“每秒刷一次”，而是“在每一帧里，算出此刻该显示哪一秒”。
- 用
performance.now()记录起始时间，结合初始new Date()推算当前应显示的秒数，避免反复调用Date构造函数 - 仅当秒数实际变化时才更新
textContent，杜绝无效 DOM 操作 - 把格式化逻辑提到帧外做缓存（如预生成
"00"到"59"的字符串数组），减少运行时开销 - 示例节选：
let startTime = performance.now(); let startTimestamp = Date.now(); function tick() { const elapsed = performance.now() - startTime; const now = new Date(startTimestamp + elapsed); const sec = now.getSeconds(); if (sec !== lastSec) { el.textContent = `${now.getHours().toString().padStart(2,'0')}:${now.getMinutes().toString().padStart(2,'0')}:${sec.toString().padStart(2,'0')}`; lastSec = sec; } requestAnimationFrame(tick); } requestAnimationFrame(tick);
网页字体适配时间数字的关键细节
时间数字常被当成“装饰”，但字体选择直接影响可读性与视觉稳定性。等宽字体不是万能解，而“系统默认数字字体”往往最可靠。
立即学习“前端免费学习笔记（深入）”；
- 避免用
font-family: "PingFang SC", "Helvetica Neue"这类含比例数字的字体——1和8宽度不同，秒数切换时会左右晃动 - 优先用系统自带等宽数字字体：
font-family: ui-monospace, SFMono-Regular, "Segoe UI Mono", "Roboto Mono", monospace - 禁用
font-variant-numeric: tabular-nums——它强制数字等宽，但在某些旧版 Safari 上反而引发重排 - 给容器设固定宽度 +
text-align: center，比靠 JS 动态测宽更稳
最易被忽略的一点：不要在 visibilitychange 事件里只停 requestAnimationFrame，还要手动记录暂停时刻，恢复时用 performance.now() 补足流逝时间——否则切回标签页那一秒，时间会跳好几秒。
