最简单可靠的方式是用 setInterval 每秒调用时间更新函数；应避免 setTimeout 递归、requestAnimationFrame 或 Web Worker；优先使用 toLocaleTimeString 自动适配系统区域设置；需监听 visibilitychange 主动启停定时器；Date 实例无需缓存，但 DOM 查询应提前获取。
直接用 setInterval 每秒调用一次时间更新函数，是最简单可靠的方式。别被“requestAnimationFrame”“Web Worker”之类方案带偏——对普通网页时钟来说，它们要么没实际收益，要么反而引入兼容性或逻辑复杂度问题。
为什么不用 setTimeout 递归？
虽然 setTimeout 递归写法（比如在函数末尾再调自己）看起来更“精准”，但它有隐性风险：
- 每次调用都新建函数栈，长期运行可能轻微影响内存；
- 如果页面卡顿或 JS 主线程阻塞，下一次调用会被推迟，导致跳秒甚至累积延迟；
- 无法统一管理定时器句柄，后续想暂停/销毁时容易漏掉或重复清除。
setInterval 是浏览器原生支持的周期调度机制，句柄明确、行为可预测，配合 clearInterval 能干净收尾。
toLocaleTimeString 和手动拼接哪个更稳？
优先用 toLocaleTimeString，除非你明确需要固定格式（如 HH:MM:SS 且不随系统语言变化）：
anything-to-html
下载
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
立即学习“前端免费学习笔记（深入）”；
- 它自动适配用户操作系统的区域设置，中文用户看到“14:31:26”，英文用户看到“2:31:26 PM”，无需额外判断
hour12； - 避免手动补零出错（比如忘记
.padStart(2, '0')或写成toString().padStart(2)导致undefined）； - 但注意：它默认不含毫秒，也不含日期，若需完整时间戳，应改用
toLocaleString()或组合toISOString()+ 字符串截取。
页面切到后台时还在跑定时器？
是的，setInterval 默认不会因标签页隐藏而暂停，会持续消耗 CPU 并可能造成时间显示“假死”（比如切回来时秒数突变）。必须主动监听 visibilitychange：
- 在
document.addEventListener('visibilitychange', ...)回调里判断document.hidden； - 隐藏时调用
clearInterval(timerId)，显示时重新setInterval； - 别只靠
pagehide或beforeunload——它们触发时机晚或不可靠，visibilitychange才是标准解法。
最易被忽略的一点：不要在 setInterval 回调里反复创建 Date 实例再丢弃。看似无害，但在低端设备或长时运行页面中，频繁构造对象会增加 GC 压力。把 new Date() 放在函数内部即可，不必提前缓存——它本身开销极小，真正要省的是 DOM 查询（比如把 document.getElementById('clock') 提前存为变量）。
