最稳妥方案是用 setinterval 配合 textcontent 每秒更新，配合 visibilitychange 暂停定时器，并同步更新 的 datetime 属性；避免 innerhtml、eval 字符串、错误 locale（须用 'zh-cn'）、未处理不可见状态及 datetime 与文本不同步。
用 setInterval 每秒更新 textContent 最稳妥
直接改 innerHTML 有 XSS 风险，且浏览器要重新解析 HTML；用 textContent 只写纯文本，安全又快。配合 setInterval 每 1000ms 执行一次，是大多数静态页面的首选。
- 确保目标元素存在且有唯一
id，比如<div id="top-time"></div> - 初始化时立即调用一次更新函数，避免页面加载后空白一秒
- 不要用字符串形式传入
setInterval（如setInterval("update()", 1000)），会触发eval，不安全也不利于调试 - 时间格式化推荐用
toLocaleString('zh-CN')，自动适配中文用户习惯，不用手动拼年月日
toLocaleString() 的 locale 和 options 参数容易错
写成 date.toLocaleString('zh') 或 'cn' 会 fallback 到默认语言，显示成英文；{ hour12: true } 在中文环境可能仍出 24 小时制——因为浏览器按系统设置兜底，不是按参数强制。
- 明确写
'zh-CN'，不是'zh'或'zh_CN' - 需要固定 24 小时制就加
{ hour12: false }，但注意 iOS Safari 对该选项支持不稳定 - 如果只要时分秒，用
toLocaleTimeString()更轻量，避免多渲染日期部分 - 服务端注入时间戳时，别直接用
new Date(serverTimestamp)，得确认时区偏移是否被正确解析
页面不可见时别让定时器白跑
用户切到其他标签页，setInterval 默认还在执行，浪费 CPU、影响电池，还可能导致时间跳变（比如切回来时一下跳 30 秒）。
- 监听
document.visibilityState，在visibilitychange事件里clearInterval暂停，恢复时重置并立即更新 - 不要依赖
requestAnimationFrame做时钟主循环——它只在页面可见且渲染帧活跃时触发，后台标签页下几乎不执行，反而更不准 - 如果页面需长期驻留（如监控看板），可降频到每 5 秒更新一次，用
performance.now()补偿误差
<time></time> 标签的 datetime 属性不是摆设
光用 <time datetime="2026-08-27T16:18:00+08:00">2026年8月27日 16:18</time> 不会自动更新，但它能让机器读取标准时间，对 SEO、无障碍访问和后续 JS 处理都关键。
- 更新显示内容时，同步更新
datetime属性值，推荐用toISOString()或带时区的toJSON() - 别把服务器时间硬编码进 HTML 再靠 JS 覆盖——DOM 渲染完成前用户可能看到旧时间，体验割裂
- 如果页面由 SSR 渲染，首次加载应由服务端写入准确的
datetime，JS 启动后再接管动态更新
datetime 属性和界面文本不同步——这两处一出问题，时间就“看起来对、其实错”。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
