性能：使用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结合将无法保证在200ms内运行。 requestAnimationFrame特别会增加时间，如果感觉它需要在它准备好给你动画的权限之前（这基本上就是requestAnimationFrame是什么 - 它给你动画的权限，说＆ ＃39;我现在准备好了＃39;）。