直接用 Date + setInterval 会跳秒、卡顿且后台失效，应改用 requestAnimationFrame + visibilityState 监听，并显式格式化时间、同步 datetime 属性、确保 DOM 加载完成再初始化。
直接用 Date 对象 + setInterval 就能跑起来，但不处理时区、不防页面隐藏、不清理定时器，上线后大概率出问题。
为什么 setInterval(updateTime, 1000) 会跳秒或卡顿
浏览器主线程阻塞时，setInterval 的回调可能延迟执行，导致连续两帧才更新一次，视觉上就是“跳秒”。更严重的是，标签页切到后台后，大多数浏览器会把定时器节流到最低 1 秒甚至暂停，回来时时间直接跳变。
实操建议：
- 改用
requestAnimationFrame循环，在每次重绘前检查是否该更新——只在秒数真变了才写 DOM - 监听
document.visibilityState，页面不可见时暂停更新，可见时立即重置并刷新一次 - 避免每 1000ms 无条件执行，改成“记录上一次更新的秒数，仅当
now.getSeconds() !== lastSecond才更新”
toLocaleTimeString() 在不同系统显示不一致
比如 toLocaleTimeString('zh-CN') 在 macOS 上可能输出 “下午 6:22:15”，在 Windows 上却是 “18:22:15”，连 AM/PM 都不一定出现——这取决于系统语言设置，不是 JS 控制的。
立即学习“Java免费学习笔记（深入）”；
实操建议：
- 要稳定格式，别依赖
toLocaleTimeString()的默认行为，显式传参：toLocaleTimeString('zh-CN', { hour12: false, hour: '2-digit', minute: '2-digit', second: '2-digit' }) - 若需中文月份/星期（如“八月二十六日 星期三”），必须手动映射数组，
getMonth()返回 0–11，getDay()返回 0–6，直接拼字符串会错位 - 注意
hour12: false并不等于“强制 24 小时制”——某些低版本 Safari 会忽略它，稳妥做法是自己算：h = now.getHours() % 24
datetime 属性和显示文本不一致的风险
用 <time id="clock" datetime=""></time> 语义化标记时间很规范，但如果只更新 textContent 而忘了同步 dateTime 属性，或者把本地时间写进 datetime（它本该是机器可读的 ISO 格式），后续用 CSS 的 [datetime] 选择器或 JS 读取时就会出错。
实操建议：
-
datetime属性必须填 ISO 8601 字符串，优先用toJSON()（等价于toISOString()）；若要本地时间，得手动加时区偏移：new Date().toLocaleString('sv-SE') + (new Date().getTimezoneOffset() > 0 ? '-' : '+') + ... - 更新时务必成对操作：
el.textContent = displayStr; el.dateTime = isoStr; - 不要用
innerHTML写时间——哪怕内容纯数字，也存在 XSS 风险；一律用textContent
最常被忽略的一点：没有初始化就调用 setInterval 或 requestAnimationFrame，DOM 元素还没加载完，脚本就报 getElementById(...) is null。要么把 <script> 放在 </body> 前，要么包一层 DOMContentLoaded 检查。
