setinterval 不精准因主线程阻塞导致跳秒或卡顿；应避免耗时操作、用 textcontent 替 innerhtml、确保 dom 加载完成；requestanimationframe 需手动判断秒数变化再更新，首次需手动触发；时间补零推荐 padstart，兼容性差则用三元。
setInterval 是最直接的方案，但不是唯一解；写对不难，写稳、写准、写得不卡顿，需要避开几个具体坑。
用 setInterval 每秒更新时间，为什么有时跳秒或卡顿？
因为 setInterval(updateTime, 1000) 只保证「每隔约1000ms发起一次调用」，不保证「每次执行刚好在整秒时刻完成」。如果页面主线程正忙（比如在跑大循环、解析大JSON），这次更新就会被延迟，下一次又准时触发，造成视觉上“跳两秒”或“卡住半秒”。
- 避免在
updateTime里做耗时操作，比如遍历 DOM、重排样式、调用未缓存的getComputedStyle - 不要用
innerHTML写入纯文本时间——它会触发 HTML 解析，哪怕内容只是"10:40:25"；改用textContent - 确保
updateTime函数在 DOM 加载完成后才绑定，否则document.getElementById("clock")返回null
requestAnimationFrame 真的比 setInterval 更准？
它本身不提供“时间精度”，而是把更新时机交给浏览器重绘节奏，更适合动画类连续变化。但用于时钟，关键在于：你得自己判断“是否真该更新”，而不是每帧都刷。
- 每次进入回调，先记录当前
Date.now()，和上一次更新时间比较，只在秒数变化时才调用textContent = ... - 这样既避免高频 DOM 写入，又不会因帧率波动导致漏秒（比如 30fps 下
setInterval(1000)可能连丢两帧） - 注意首次调用必须手动触发
requestAnimationFrame(clockLoop)，否则不会启动
格式化时间时，getMonth() + 1 和 padStart(2, '0') 哪个更可靠？
getMonth() 返回 0–11，必须加 1；而 padStart 是现代写法，IE 不支持。两者用途不同，不能互换。
- 月份/日期/小时/分钟/秒都要补零？用
String(x).padStart(2, '0')最清晰，但需确认目标环境（如要兼容 IE，得回退到三元表达式：x ） - 如果只要本地习惯格式（如中文“上午10:40”），直接用
toLocaleTimeString('zh-CN')，它自动处理 AM/PM、千位分隔、农历等细节 - 想输出 ISO 格式（如
"2026-08-26T10:40:25"）？用new Date().toISOString()，但注意它固定为 UTC 时间，不是用户本地时区
显示多时区时间，Intl.DateTimeFormat 怎么配参数？
硬拼字符串做不到跨时区，必须靠 Intl API。它的核心是传入 { timeZone: 'Asia/Shanghai' } 这类 IANA 时区标识符。
- 常见错误：写成
timeZone: 'GMT+8'或'CST'——这些不是标准值，浏览器可能忽略或报错 - 正确示例：
new Intl.DateTimeFormat('zh-CN', { hour12: false, hour: '2-digit', minute: '2-digit', second: '2-digit', timeZone: 'America/New_York' }).format(new Date()) - 性能提示：
Intl.DateTimeFormat实例可复用，别在每次更新时都 new 一个
clearInterval 或没监听 visibilitychange 事件的话，切到其他标签页后，定时器仍在后台吃 CPU——尤其当页面有多个时钟时，这个问题会立刻暴露。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
