javascript - Performance : When animating using requestAnimationFrame, 是一个比手动计算 ellasped 时间更好的间隔吗？

Question

在示例中，我看到两种不同的方式如何使用 requestAnimationFrame() 处理动画:

第一个使用setTimeout()

const e = document.getElementById('e');
let count = 0;

function move(timestamp) {
  e.style.left = ++count + 'px';

  setTimeout(f=>{
    requestAnimationFrame(move);
  }, 200);
};

requestAnimationFrame(move);

在这个 jsfiddle 中尝试.

第二个自己计算耗时

const e = document.getElementById('e');
let count = 0;
let past = null; 

function move(timestamp) {
  if (past !== null && timestamp - past < 200) {
    requestAnimationFrame(move);
    return;
  }

  past = timestamp;
  e.style.left = ++count + 'px';
  requestAnimationFrame(move);
};

requestAnimationFrame(move);

在这个 jsfiddle 中尝试.

---

现在我的问题是:哪个表现更好？

---

我的猜测是，如果一个区间适用，它会表现得更好。没有那么多逻辑表达式要评估，也没有那么多计算要做。但这只是一个猜测。那么，他们的一种方式比另一种方式有什么好处吗？

Answer 1

你应该做第一个。但是，您不应该假设它恰好是 200 毫秒。如果您需要确切知道它已经过了多少毫秒，您必须像第二个示例一样每次都计算它，但继续使用第一个示例的结构。

第二个示例的问题在于它计算新帧的频率与第一个示例相同，但它运行该函数只是为了检查它是否不需要每隔一段时间运行一次该函数。那里有很多浪费的计算。

您需要计算耗时(如果您需要准确性)，因为 setTimeout 结合 requestAnimationFrame 不能保证在 200 毫秒内运行。特别是 requestAnimationFrame 会在它准备好向您授予动画许可之前为其添加时间(如果它觉得需要的话)(这基本上就是 requestAnimationFrame 的意思——它授予您动画许可，说“我现在准备好了”)。