必须清除setInterval定时器，推荐用toLocaleTimeString格式化时间，更新频率设为1000ms，使用textContent写入DOM并校验元素存在性。
用 setInterval 更新时间必须注意清除定时器
页面卸载或组件销毁时没清理 setInterval，会导致内存泄漏和时间错乱——尤其在单页应用（如 Vue/React）中频繁切换路由时，旧定时器还在跑，新定时器又启动，多个 setInterval 同时修改同一个 DOM 元素，时间跳变、卡顿、甚至报错 Cannot set property 'innerText' of null。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 用变量保存定时器 ID，比如
let timerId = setInterval(...) - 在页面隐藏（
visibilitychange）、组件卸载（beforeunload或框架的onUnmounted/useEffect cleanup）时调用clearInterval(timerId) - 避免在函数内反复声明新定时器却不存 ID —— 这会让旧定时器彻底失控
toLocaleTimeString 比手动拼接更可靠
手写 hours + ':' + minutes + ':' + seconds 看似简单，但容易漏掉补零（如 9:5:7 → 应为 09:05:07）、忽略时区（用户本地时间 vs 服务器时间）、不支持 12/24 小时制切换。而 toLocaleTimeString 原生适配用户系统设置，一行解决。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 基础用法：
new Date().toLocaleTimeString()（自动带秒，格式依系统） - 指定格式（推荐）：
new Date().toLocaleTimeString('zh-CN', { hour12: false, hour: '2-digit', minute: '2-digit', second: '2-digit' }) - 不要用
getHours()等方法自己拼：它返回数字，不自动补零；且getSeconds()可能返回 0 导致显示 “:0” 而非 “:00”
更新频率设为 1000ms 就够了，别用 100ms 或 requestAnimationFrame
人眼无法分辨毫秒级变化，每秒更新一次完全满足“实时”需求。设成 100ms 不仅无意义，还会增加 CPU 占用；用 requestAnimationFrame 反而可能因帧率波动导致跳秒（比如 60fps 下约 16ms 触发一次，但时间只在整秒才变，中间大量无效渲染）。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 固定用
setInterval(() => { updateClock() }, 1000) - 如果担心 setInterval 在页面后台被节流（Chrome 中最小间隔升至 1000ms），可在每次执行时检查当前秒数是否真变了再更新 DOM，避免冗余操作
- 不用
setTimeout递归代替 —— 容易因 JS 执行延迟累积误差，10 分钟后可能慢 1~2 秒
把时间写入 textContent 而不是 innerHTML
时间字符串是纯文本，不含 HTML 标签。用 innerHTML 不仅多一层解析开销，还可能意外触发 XSS（虽然时间本身安全，但若后续逻辑拼接了用户输入就危险）。更关键的是，某些老浏览器对 innerHTML 设置空字符串或纯数字时有兼容问题。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 统一用
element.textContent = timeString - 初始化时确保目标元素存在，例如
const clockEl = document.getElementById('clock')，加个if (!clockEl) return防止报错 - 如果需要加样式（如粗体、颜色），用 CSS 控制，别往内容里塞
<strong>
