应使用 requestAnimationFrame 结合 Date.now() 实时计算剩余时间，避免 setInterval 累加误差；目标时间需明确时区（如 '2025-01-01T00:00:00+0800'）；数字位用等宽字体或固定宽度容器防抖动；HTML 预置占位结构防 FOUC；跨年触发需预留 50ms 渲染余量。
倒计时逻辑用 setInterval 还是 requestAnimationFrame？
直接用 setInterval 更新时间最简单，但容易漂移——比如页面切到后台再切回，倒计时可能跳过几秒甚至卡住。真实场景下，应该用当前时间戳实时计算剩余毫秒，而不是靠定时器累加减。
- 每次渲染前调用
Date.now()获取当前时间，和目标时间（2025-01-01T00:00:00）做减法 - 用
requestAnimationFrame驱动更新，比setInterval(1000)更精准、更省资源，且页面不可见时自动暂停 - 别写
setInterval(() => { seconds-- }, 1000)——这是典型“假倒计时”，误差随时间累积
new Date('2025-01-01') 在 Safari 上报错？
Safari 对 ISO 日期字符串解析更严格，new Date('2025-01-01') 在某些旧版 Safari 里会返回 Invalid Date。必须补全时间部分并确保时区明确。
- 写成
new Date('2025-01-01T00:00:00')或更稳妥的new Date('2025-01-01T00:00:00+0800') - 或者用数值构造法：
new Date(2025, 0, 1)（注意月份从 0 开始） - 别依赖用户本地时区——元旦是北京时间，目标时间应统一按东八区算，否则海外用户看到的倒计时起点不对
倒计时数字怎么对齐才不跳动？
两位数补零后宽度仍会变：比如 “09” 和 “10” 字宽不同，尤其用等宽字体以外的字体时，数字抖动明显。这不是 CSS 动画问题，是字符渲染本身导致的。
- 给每个数字位单独套
<span>，用font-family: 'Courier New', monospace强制等宽 - 或用
display: inline-block; width: 2em; text-align: center给每位数字固定宽度 - 避免用
text-align: justify或弹性布局强行拉伸数字容器——会扭曲字体，反而更晃
页面一打开就闪一下空白再显示数字？
这是 JS 渲染延迟导致的典型 FOUC（Flash of Unstyled Content）。倒计时数字初始状态为空，JS 加载执行后才填入，中间有几十毫秒空白。
立即学习“前端免费学习笔记（深入）”；
- 在 HTML 里预先写好占位结构，比如
<span class="digit">0</span>，CSS 设为默认可见 - JS 启动后立即计算一次并填充，而不是等第一帧再更新
- 把脚本放在
<body>底部或加defer，但别用async——它可能打乱执行顺序
真正麻烦的是跨年瞬间的精度控制：毫秒级误差不影响观感，但如果你打算在 00:00:00.000 触发音效或弹窗，得提前 50ms 预留渲染余量，不然动画帧可能错过那个精确时刻。
