动画最小时间间隔

问题

如果需要手动写动画，你认为最小时间间隔是多久，为什么？

解答

最小时间间隔是 16.67ms（约 17ms）。

原因

多数显示器的刷新率是 60Hz，即每秒刷新 60 次：

1000ms / 60 = 16.67ms

每 16.67ms 屏幕刷新一次，小于这个间隔的动画更新用户无法感知，反而浪费性能。

使用 setInterval 实现动画

// 不推荐：使用 setInterval
const element = document.getElementById('box');
let left = 0;

const timer = setInterval(() => {
  left += 2;
  element.style.left = left + 'px';
  
  if (left >= 200) {
    clearInterval(timer);
  }
}, 16); // 约 16.67ms

更好的方式：requestAnimationFrame

// 推荐：使用 requestAnimationFrame
const element = document.getElementById('box');
let left = 0;

function animate() {
  left += 2;
  element.style.left = left + 'px';
  
  if (left < 200) {
    requestAnimationFrame(animate);
  }
}

requestAnimationFrame(animate);

为什么 requestAnimationFrame 更好

// requestAnimationFrame 会自动适配刷新率
// 60Hz 显示器 → 16.67ms 调用一次
// 120Hz 显示器 → 8.33ms 调用一次
// 144Hz 显示器 → 6.94ms 调用一次

// 还能获取精确的时间戳
function animate(timestamp) {
  // timestamp 是从页面加载开始的毫秒数
  console.log(timestamp);
  requestAnimationFrame(animate);
}

requestAnimationFrame(animate);

关键点

• 16.67ms 是基于 60Hz 刷新率计算得出（1000ms / 60）
• 小于刷新间隔的更新不会被渲染，造成性能浪费
• setInterval / setTimeout 不精确，可能出现丢帧或卡顿
• requestAnimationFrame 自动同步屏幕刷新率，是实现动画的首选
• 高刷新率显示器（120Hz、144Hz）的最小间隔更短