直接用new date()+setinterval易出错，因主线程阻塞或页面后台运行会导致定时器跳秒、延迟甚至暂停；应每次读取当前时间校准，并缓存dom元素、立即执行首帧、用textcontent更新。
直接用 new Date() + setInterval 就能实现，但只写一次、不缓存元素、不补零、不处理页面不可见状态，时间大概率会错乱或卡顿。
为什么 setInterval(updateClock, 1000) 有时会跳秒或延迟
主线程阻塞（比如长任务、大量 DOM 操作）会让 setInterval 实际执行间隔远超 1000ms；浏览器在标签页切后台或移动端锁屏时还会主动节流，导致定时器暂停数秒甚至更久。
- 别依赖「每秒准时触发」，而是每次执行时重新读取
new Date()，用真实当前时刻校准显示 - 避免在回调里反复调用
document.getElementById('clock')，提前缓存：const clockEl = document.getElementById('clock'); - 加一次立即执行：
updateClock(); setInterval(updateClock, 1000);，防止首屏空白 - 如果对精度要求高（如倒计时），改用
requestAnimationFrame+ 时间差计算，但普通时钟没必要
toLocaleTimeString() 在中文环境下的坑
toLocaleTimeString('zh-CN') 看似省事，但输出不稳定：Windows 和 macOS 默认格式不同，Safari 对 timeZone 选项支持弱，且无法控制是否补零（比如 “9:5:7” 而非 “09:05:07”）。
- 要稳定输出
13:11:26，优先手动拼接：String(now.getHours()).padStart(2, '0') - 需要固定时区（如北京时间），必须显式传
{ timeZone: 'Asia/Shanghai' }，否则用户换设备/系统语言就变 - IE 不支持
timeZone选项，若需兼容，得 fallback 到服务端时间或用Date.UTC()手动偏移
textContent 还是 innerHTML？
用 textContent。它只当纯文本处理，不触发 HTML 解析，既防 XSS，又快——尤其当你只是显示数字和冒号时。
- 别用
innerHTML = timeStr，除非你真要插入<span></span>或 emoji - 别用
innerText：它受 CSS 影响（display: none的父元素会让子元素内容被忽略），textContent更可靠 - 确保目标元素存在再赋值，否则会报
Cannot set property 'textContent' of null
页面切到后台后时间还准吗
不准。Chrome、Firefox、Safari 都会在标签页不可见时大幅降低 setInterval 频率（常见为 1 分钟一次），导致秒数“突变”。这不是 bug，是浏览器节能策略。
- 检测页面可见性：
document.hidden，隐藏时暂停更新逻辑，切回前台再立刻刷新一次 - 不要试图绕过节流（比如用 Web Worker + postMessage），代价远高于收益
- 如果业务强依赖准确时间（如在线考试倒计时），必须和服务端时间对齐，前端只做展示层
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
