为什么 requestAnimationFrame() 在帧末尾运行我的代码，而不是在帧开头？

var y = 0
canvas.height *= 5
ctx.fillStyle = 'green'
function update () {
  requestAnimationFrame(update)
   ctx.clearRect(0, 0, canvas.width, canvas.height)
  ctx.fillRect(0, y, 300, 300)
  y++
}
update()

对于这个简单的 JSBin (https://jsbin.com/yecowob/edit?html,js,输出） 一个正方形沿着屏幕移动，这就是 Chrome 开发工具的方式 时间线看起来：

https://i.stack.imgur.com/QqrW5.jpg

据我了解，垂直的灰色虚线是当前帧的结束和下一帧的开始。在屏幕截图中，我们有一个 19.3 毫秒的帧，其中浏览器几乎不执行任何操作（大量空闲时间）。如果浏览器在框架启动时就运行所有代码，难道它不能避免这种情况吗？

然而，如果我绘制正方形 500 次，CPU 速度会减慢 6 倍 (https://jsbin.com/yecowob/4/edit?js,输出），我得到时期 浏览器正是我想要的（开始运行代码作为框架 开始），但它再次不同步：

https://i.stack.imgur.com/vjJrW.jpg

当它开始在虚线上运行时，fps 更加平滑，但只有当浏览器有一些繁重的工作要做时我才能让它工作。

那么为什么 requestAnimationFrame() 不是每次都在帧开始时触发，我怎样才能让它这样做呢？

非常感谢您在这方面给我的任何帮助。

因为那就是requestAnimationFrame作用：它安排回调在下一个“绘画帧”触发，就在实际绘画到屏幕之前。

这里的“框架”指的是事件循环迭代，而不是视觉上的迭代，此后我将继续使用“事件循环迭代”来进行区分。

所以如果我们看一下事件循环迭代的结构正如 HTML 规范所描述的，我们可以看到“运行动画帧回调“算法是从内部调用的”更新渲染图“ 算法。
该算法负责步骤2通过检查“来确定当前事件循环迭代是否是绘画迭代渲染机会每个活动文档的“。如果不是，那么下面的所有内部步骤都将被丢弃，包括我们的“运行动画帧回调".
这意味着我们的requestAnimationFrame预定回调只会在一个非常特殊的事件循环迭代中执行：下一个带有渲染机会.

Specs don't describe precisely at which frequency this "painting frames" should occur, but basically most current vendors try to maintain 60Hz, while Chrome will make it cap to the active display's refresh rate. _{It is expected that Chrome behavior spreads to other vendors.}

所以你描述的情况是正常的。如果你想要一个简化版本，你可以考虑requestAnimationFrame( fn ) as setTimeout( fn, time_needed_until_the_next_painting_frame )（这里的细微差别是超时回调在开始时执行事件循环迭代 while 动画帧回调最后执行）。

为什么要这样设计呢？

因为大多数时候我们希望在屏幕上显示最新的信息。因此，在绘制之前触发这些回调可确保应绘制的所有内容都位于最新位置。

但这也意味着，我们确实不应该在那里进行过于繁重的操作，以免失去绘画机会。

现在，我必须指出，有一个正在进行的提案包括一个requestPostAnimationFrame，这将安排回调在下一个“绘画帧”触发，只是after屏幕上的实际绘画。
使用这种方法，您将获得预期的行为。
不幸的是，这仍然只是一个提案，尚未包含在规格中，并且不确定是否会包含在内。

虽然它已经在 Chrome 中实现，但背后的“实验性网络平台功能“标志，我们能做的最好的事情就是在正常浏览器中处理它的行为，在下一个开始时安排一个回调事件循环迭代.
这是我制作的示例实现另一个问答:

if (typeof requestPostAnimationFrame !== 'function') {
  monkeyPatchRequestPostAnimationFrame();
}

requestAnimationFrame( animationFrameCallback );
requestPostAnimationFrame( postAnimationFrameCallback );

// monkey-patches requestPostAnimationFrame
//!\ Can not be called from inside a requestAnimationFrame callback
function monkeyPatchRequestPostAnimationFrame() {
  console.warn('using a MessageEvent workaround');
  const channel = new MessageChannel();
  const callbacks = [];
  let timestamp = 0;
  let called = false;
  channel.port2.onmessage = e => {
    called = false;
    const toCall = callbacks.slice();
    callbacks.length = 0;
    toCall.forEach(fn => {
      try {
        fn(timestamp);
      } catch (e) {}
    });
  }
  window.requestPostAnimationFrame = function(callback) {
    if (typeof callback !== 'function') {
      throw new TypeError('Argument 1 is not callable');
    }
    callbacks.push(callback);
    if (!called) {
      requestAnimationFrame((time) => {
        timestamp = time;
        channel.port1.postMessage('');
      });
      called = true;
    }
  };
}


// void loops, look at your dev-tools' timeline to see where each fires
function animationFrameCallback() {
  requestAnimationFrame( animationFrameCallback );
}
function postAnimationFrameCallback() {
  requestPostAnimationFrame( postAnimationFrameCallback )
}