应将每个数字位拆分为独立span元素，共6个，用textContent更新单个字符并配合font-variant-numeric: tabular-nums确保等宽，避免innerHTML整段更新引发重排抖动。
倒计时 DOM 结构怎么写才不抖动
直接用 innerHTML 更新整个时间字符串（比如 "02:15:47"），浏览器会重排整行，尤其在低端安卓机或 iOS Safari 上，数字会左右晃、跳位。真正稳的写法是把每个数字位拆成独立 span，共 6 个（时十位、时个位、分十位、分个位、秒十位、秒个位）。
- 每个
span设固定宽高 +overflow: hidden，避免“1”和“8”宽度不一致导致错位 - 只用
textContent更新单个字符，别碰innerHTML—— 后者慢、易触发 XSS、还多一层 HTML 解析开销 - CSS 加
font-variant-numeric: tabular-nums或等宽字体（如Courier New），保证所有数字占位一致
setInterval 每秒更新，为什么还会跳秒或不准
setInterval 本身不保准时序：页面切后台、JS 被节流、某次回调执行卡顿 300ms，下一次仍按 1000ms 触发，就会漏秒或连跳。关键不是调用频率，而是每次是否重新校准。
- 启动时拿到目标时间戳（如后端返回的
end_time: 1754399999000），别用字符串解析new Date("2025-12-31 23:59:59")—— Safari 和旧 Chrome 会失败 - 每次回调里必须调
Date.now()，算remaining = end_time - Date.now()，再换算成天/时/分/秒 - 间隔设死
1000，别写997或1005自作聪明；延迟超 200ms 就跳过本次更新，防连刷抖动
抢购按钮倒计时结束，前端禁用就安全了吗
完全不安全。用户删掉 disabled 属性、改 endTime 变量、甚至用 curl 直接发请求，前端控制形同虚设。
Article To Html
下载
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
- 按钮点击时，前端只传当前剩余秒数作参考，后端必须重新查活动状态、库存、用户限购、幂等 token
- 接口响应必须带明确状态字段（如
{"status": "closed", "msg": "活动已结束"}），前端据此禁用按钮 + 切换文案 - 提交前可加一次轻量服务端时间校验（缓存 10 秒内有效），避免因本地时间不准导致“明明到了却提示未开始”
移动端切后台再回来，倒计时卡住不动怎么办
iOS Safari 和部分安卓浏览器会在标签页隐藏时把 setInterval 降频到 10s 以上，切回来时倒计时可能已经卡住几十秒。
立即学习“前端免费学习笔记（深入）”；
- 监听
visibilitychange事件：document.addEventListener('visibilitychange', () => { if (!document.hidden) updateCountdown(); }) - 页面显示瞬间立刻执行一次
updateCountdown()，用当前时间戳重算剩余值，视觉上无缝衔接 - 别在回调里反复查
document.querySelector—— 提前缓存节点引用，比如const secUnits = document.querySelectorAll('.sec-digit');
真实项目里，最常被忽略的是服务端时间锚定和 DOM 更新粒度。前者决定准不准，后者决定稳不稳——这两点没做对，再炫的 CSS 动画也掩盖不了体验裂缝。
