真正稳定的动态时间显示需以系统时间为锚点，用requestAnimationFrame+Date.now()校准整秒切换时更新，textContent替代innerHTML提升安全与性能，并监听visibilitychange暂停/恢复以防止后台漂移。
直接用 setInterval 每秒更新，看似简单，但容易出现跳秒、卡顿、时间不准甚至内存泄漏。真正稳定的动态时间显示，核心不是“刷得勤”，而是“刷得准、刷得省、刷得可控”。
为什么 setInterval(updateTime, 1000) 会跳秒？
因为 setInterval 只保证「平均间隔」接近 1000ms，不保证每次执行都精准落在整秒点上。如果页面卡顿、JS 执行延迟或主线程忙，某次 updateTime 可能晚了 200ms 才执行，下一次又晚 200ms，结果就是连续两秒没更新，或者一秒内更新两次——视觉上就是跳秒或抖动。
更关键的是：它不管当前真实时间是否已过整秒，只机械计时。你看到的“10:26:05”可能实际已是 10:26:05.892，但 DOM 还没刷新，用户就感知到延迟。
解决思路是：不依赖定时器节奏，而以系统时间为锚点，只在真实秒数变化时才更新。
立即学习“前端免费学习笔记（深入）”；
用 requestAnimationFrame + 时间戳校准，实现无缝刷新
浏览器每帧重绘前调用 requestAnimationFrame，频率稳定（通常 60fps），且与屏幕刷新同步，比 setInterval 更可靠。配合 Date.now() 实时比对，可做到“只在整秒切换瞬间更新”，消除跳变。
- 定义一个
clockTick函数，在内部用Date.now()获取毫秒级时间戳 - 计算当前秒数：
Math.floor(timestamp / 1000)，缓存上一次渲染的秒数 - 仅当新秒数 ≠ 上一次秒数时，才格式化并更新 DOM；否则直接
requestAnimationFrame(clockTick) - 首次调用必须手动触发：
requestAnimationFrame(clockTick)
这样既避免高频无意义 DOM 操作，又确保每次更新都严格对应真实秒切换，视觉完全连贯。
textContent 替代 innerHTML，防 XSS 且更快
时间字符串不含 HTML 标签，用 innerHTML 不仅多余，还可能被恶意构造的时区名或本地化字符串意外注入（虽然概率低）。更重要的是，innerHTML 触发 HTML 解析和重排，而 textContent 是纯文本赋值，性能更高、更安全。
示例写法：
const el = document.getElementById('clock');
el.textContent = `${hours}:${minutes}:${seconds}`; // ✅ 推荐
// el.innerHTML = `${hours}:${minutes}:${seconds}`; // ❌ 不必要且有风险
如果你用 Intl.DateTimeFormat 做多时区格式化，它的输出也是纯字符串，同样适用 textContent。
页面不可见时暂停更新，省资源防 drift
用户切走标签页后，setInterval 或 requestAnimationFrame 仍可能运行（尤其 Chrome 对后台页有节流），但时间不会“冻结”——等用户切回来，可能发现时钟已落后好几秒，或者疯狂补帧导致卡顿。
正确做法是监听 visibilitychange 事件：
- 页面隐藏时，调用
cancelAnimationFrame(rafId)或clearInterval(timerId) - 页面重新可见时，重置时间状态并重新启动循环
- 别忘了在卸载前清理，比如在
beforeunload或组件unmount时清除定时器/raf
这是最容易被忽略的一环：不处理 visibility，所谓“稳定”只是前台有效，一离开就失效。
真正的稳定不在刷新频率，而在对时间锚点的尊重、对 DOM 更新时机的克制、以及对生命周期的诚实管理。跳秒、卡顿、后台漂移，几乎都源于这三点中的某一个被绕过了。
