用textContent+setInterval是最简可靠方案，避免跳秒、卡顿、XSS和重绘风险，需立即初始化并用toLocaleTimeString格式化。
直接用 setInterval 每秒调用 new Date() 并更新 textContent，就能稳定显示时间不跳转。关键不是“怎么动”，而是“怎么不动”——避免 DOM 重绘、事件丢失、XSS 和时钟跳秒。
为什么时间会跳转或卡顿
常见现象是：秒数突然从 12:34:59 跳到 12:35:01，或者页面切换标签页后回来时间滞后两秒。根本原因不是 JS 慢，而是更新逻辑没对齐浏览器刷新节奏，或用了不稳定的触发方式。
-
setTimeout递归调用：每次执行完才设下一次，主线程卡顿时就会堆积延迟，导致跳秒 - 只在页面加载时执行一次
new Date()：比如写死在 HTML 里或没包进定时器，时间永远不变 - 用
innerHTML更新纯文本容器：虽能用，但多此一举，还可能意外解析 HTML 字符（比如时间里含<） - 没处理页面隐藏状态：用户切走标签页时，
setInterval仍运行，但浏览器会节流，恢复后批量触发，造成时间错乱
用 textContent + setInterval 最简可靠方案
这是绝大多数场景的首选。它不依赖复杂 API，兼容性好（IE11+），且不会引入 XSS 或重绘风险。
- 目标元素必须有唯一
id，例如<div id="clock"></div> - 格式化推荐用
toLocaleTimeString('zh-CN', { hour12: false })，中文系统下自动补零、用 24 小时制，英文系统也不会崩 - 不要手动拼接字符串再
padStart(2, '0')—— 看似可控，但getMonth()返回 0~11、getHours()在 12 小时制下要额外判断，容易漏 case - 初始化时立即调用一次函数，避免页面加载完成前空白 1 秒
function updateClock() {
const now = new Date();
document.getElementById('clock').textContent =
now.toLocaleTimeString('zh-CN', { hour12: false });
}
updateClock(); // 先显示一次
setInterval(updateClock, 1000);需要更高精度时用 requestAnimationFrame
仅当你的页面已有大量动画、或要做毫秒级倒计时（如直播倒计时），才值得换。它本身不保证“每秒一次”，而是等下一帧渲染前执行，所以更顺滑、不丢帧，但需自己判断是否真过了一秒。
立即学习“前端免费学习笔记（深入）”；
- 不能直接替换
setInterval，得加一个上一次更新的时间戳做比对 - 首次调用必须用
requestAnimationFrame(clockLoop)启动，否则不执行 - 如果用户切走标签页，
requestAnimationFrame会被暂停，回来后自然续上，不会跳秒 - 别在循环里频繁调用
new Date()—— 每帧都调没问题，但若每帧都查服务端时间就废了
let lastUpdate = 0;
function clockLoop(timestamp) {
if (timestamp - lastUpdate >= 1000) {
const now = new Date();
document.getElementById('clock').textContent =
now.toLocaleTimeString('zh-CN', { hour12: false });
lastUpdate = timestamp;
}
requestAnimationFrame(clockLoop);
}
requestAnimationFrame(clockLoop);局部刷新表格里的时间列？别碰 innerHTML
如果时间显示在表格某列（比如“最后更新时间”），而整张表又支持局部刷新（如分页、筛选），这时候千万不能对 tbody 做 innerHTML = ...。它会清空所有行内绑定的事件、抹掉用户正在编辑的输入框内容，还可能执行恶意脚本。
- 正确做法是：用
replaceChildren()替换全部tr节点，父容器（tbody）上的监听器保留不动 - 每一行
tr的时间单元格，仍用textContent设置，而不是innerHTML - 后端返回 JSON，前端用
new Date(item.updatedAt).toLocaleTimeString()格式化，别传 HTML 片段 - 如果某行时间要高亮变动（比如刚更新），用 CSS class 控制，不要靠重绘整行
最常被忽略的一点：时间显示本质是「客户端本地时间」，和服务端时间可能差几秒甚至几分钟。如果业务强依赖准确时间（如金融下单、考试倒计时），必须用服务端时间做 fallback，并通过 NTP 或定期校准机制同步，不能只信 new Date()。
