用requestAnimationFrame优化JavaScript实时时间显示

在网页中实现实时时钟或倒计时时，直接用 setInterval(fn, 1000) 容易出现跳秒、与屏幕刷新错位以及页面切到后台后无效运行的问题。改用 requestAnimationFrame 配合“整秒变更检测”，可以让时间更新贴合浏览器的渲染周期，同时把 DOM 写入严格控制在每秒一次，兼顾显示流畅度与运行开销。

为什么 setInterval(1000) 显示时间容易不顺畅

setInterval(fn, 1000) 只能保证浏览器“至少间隔 1000 毫秒后再把回调放进任务队列”，并不保证回调会准时在整秒边界执行。只要主线程上刚好有长任务、脚本解析或网络回调占用时间，这一次时钟更新就会被推迟。

假设上一次刷新发生在 10:00:01.980，下一次哪怕只延迟几十毫秒到 10:00:03.020，界面就会直接从 :01 跳到 :03，让用户看到明显的“卡顿后跳两秒”。另外，setInterval 的触发节奏与显示器的刷新周期相互独立，即使没有大幅阻塞，也可能因为每次都恰好错过重绘窗口而显得节奏不均匀。

先澄清一个常见误解：rAF 不是“更准的时钟”

有人会认为“把 setInterval 换成 requestAnimationFrame，时间就会更准、资源就会自动更省”。这种说法只说对了一半，直接照搬很容易写出比原来更耗性能的代码。

• 合理的部分：requestAnimationFrame 会在浏览器准备重绘下一帧前执行，通常与显示器刷新率（如 60Hz 或 120Hz）同步；而且标签页切换至后台或最小化时，浏览器会自动暂停它的回调，省去了无效渲染。
• 需要修正的地方：requestAnimationFrame 本身不提供计时基准，显示是否准确依然取决于每次回调中读取的 Date.now() 或 new Date()。更关键的是，如果只显示到秒（HH:MM:SS），却在每一帧都无条件执行一次格式化并赋值给 element.textContent，就会把原本每秒 1 次的 DOM 更新放大成每秒 60 次甚至 120 次。

因此，真正合理的优化组合是：用 Date.now() 获取真实时间，用 requestAnimationFrame 对齐绘制时机，再用 lastSecond 判断过滤掉同秒内的重复 DOM 写入。

操作步骤：实现可安全启停的 rAF 实时时钟

下面以浏览器原生环境为例（可直接保存为本地 .html 文件并用浏览器打开），按四个步骤完成一个低开销的实时时间组件。

第 1 步：准备容器与复用格式化器

在 HTML 中准备一个时间显示节点，并在 CSS 中加上 font-variant-numeric: tabular-nums，让数字 0 到 9 保持等宽占位，避免数字变化时文本整体左右轻微晃动。

格式化时间时，不要在每帧回调中新建 new Intl.DateTimeFormat(...) 或反复拼接复杂格式对象，应在初始化阶段只创建一次并复用。

第 2 步：在循环外记录 lastSecond，只对跨秒帧更新 DOM

每一帧开始时取 const now = Date.now()，通过 Math.floor(now / 1000) 得到当前 Unix 整秒数。只有当这个值与上一次记录的 lastSecond 不一致时，才调用格式化函数更新 textContent。如果浏览器以 60Hz 刷新，其中 59 帧都会在一次整数比较后直接进入下一帧预约，不触发任何布局或重绘工作。

第 3 步：保存 rafId 并接入页面可见性事件

调用 requestAnimationFrame 会返回一个数字句柄 rafId。组件销毁或需要暂停时钟时，必须调用 cancelAnimationFrame(rafId) 停止循环，并将句柄置为 null。同时监听 visibilitychange 事件：标签页切到后台时主动停止，切回前台时先立刻刷新一次当前时间，再重启帧循环，避免用户回到页面的一瞬间看到旧时间。

完整示例（浏览器可直接运行）

将以下代码保存为 raf-clock.html，直接在现代浏览器中打开即可看到效果：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8" />
  <title>requestAnimationFrame 实时时钟</title>
  <style>
    .clock {
      font-family: "PingFang SC", "Microsoft YaHei", sans-serif;
      font-size: 32px;
      font-weight: 600;
      font-variant-numeric: tabular-nums;
      color: #464b48;
    }
  </style>
</head>
<body>
  <time id="clock" class="clock" datetime="">--:--:--</time>

  <script>
    function createRealtimeClock(targetEl) {
      const formatter = new Intl.DateTimeFormat("zh-CN", {
        hour: "2-digit",
        minute: "2-digit",
        second: "2-digit",
        hour12: false
      });

      let rafId = null;
      let lastSecond = -1;

      function render(nowMs) {
        const currentSecond = Math.floor(nowMs / 1000);
        if (currentSecond !== lastSecond) {
          lastSecond = currentSecond;
          const date = new Date(nowMs);
          const text = formatter.format(date);
          targetEl.textContent = text;
          targetEl.setAttribute("datetime", date.toISOString());
        }
      }

      function tick() {
        render(Date.now());
        rafId = window.requestAnimationFrame(tick);
      }

      function start() {
        if (rafId !== null) return;
        render(Date.now());
        rafId = window.requestAnimationFrame(tick);
      }

      function stop() {
        if (rafId !== null) {
          window.cancelAnimationFrame(rafId);
          rafId = null;
        }
      }

      function handleVisibilityChange() {
        if (document.hidden) {
          stop();
        } else {
          start();
        }
      }

      document.addEventListener("visibilitychange", handleVisibilityChange);
      start();

      return function destroy() {
        stop();
        document.removeEventListener("visibilitychange", handleVisibilityChange);
      };
    }

    const clockEl = document.getElementById("clock");
    const destroyClock = createRealtimeClock(clockEl);
  </script>
</body>
</html>

需要毫秒显示或极致省电时的调整策略

不同精度需求对应不同的更新逻辑，不能把“整秒节流”原封不动套进秒表场景，也不能忽视电量敏感页面的帧调度成本。

• 秒表、毫秒级计时器（如 HH:MM:SS.SSS）：这时确实需要每一帧都刷新界面，不能按秒跳过。直接去掉 lastSecond 判断，在 tick() 中按 Date.now() - startTime 计算流逝毫秒并更新即可；此时 tabular-nums 样式尤其重要，否则小数部分高速变化会让整行文字剧烈抖动。
• 对电池功耗极度敏感的纯秒级页面：虽然空转比对 Math.floor(Date.now() / 1000) 开销极小，但在低功耗移动设备上，纯 rAF 依然会每秒唤醒 JS 主线程 60 次。如果你希望连空转比对也省掉，可以采用“setTimeout 对齐下一整秒 + requestAnimationFrame 提交绘制”的混合方案：先计算距离下一个整秒还差 1000 - (Date.now() % 1000) 毫秒，用 setTimeout 休眠到整秒附近，醒来后再调用一次 requestAnimationFrame 把新时间写进 DOM。

如何确认优化生效与常见排错

代码接入页面后，可以通过以下三项检查确认优化确实起效：

1. 验证 DOM 修改次数：打开浏览器开发者工具的 Elements（元素）面板，定位到 <time id="clock"> 节点。正常情况下，该节点的高亮闪烁应当严格保持每秒一次；如果发现它以极高频率连续闪烁，说明遗漏了 lastSecond 判断或每次传入了不同格式的字符串。
2. 验证后台与切回行为：切换到其他标签页等待几秒再切回，时间应立即显示当前最新秒数，不出现停留在旧时间一秒后再跳变的情况。
3. 验证销毁后无泄漏：在控制台调用 destroyClock()（或卸载对应组件）后，时钟数字应停止变化，且在 Performance（性能）面板录制数秒后，帧循环中不再出现 tick 回调。

如果项目中还出现以下细节问题，可以按对应方式快速排查：

• 数字切换时整行轻微左右抖动：检查容器或其父级是否设置了非等宽字体且未开启 font-variant-numeric: tabular-nums。
• new Date() 与服务器时间存在偏差：requestAnimationFrame 只负责本地渲染调度，若业务要求严格对时，应在初始化时记录 serverTime - Date.now() 的偏移量 offset，在每次计算时使用 Date.now() + offset。