javascript - requestAnimationFrame 在帧结束之前调用？

Question

我一直在尝试在 HTML5 Canvas 上对复杂场景进行无卡顿渲染。这个想法是将渲染分成多个批处理，每个批处理最多花费 12 毫秒，以便同时运行的动画(执行起来非常便宜)不会被中断。

从概念上讲，批量渲染是这样实现的:

function draw(ctx) {
  var deadline = window.performance.now() + 12; // inaccurate, but enough for the example
  var i = 0;
  requestAnimationFrame(function drawWithDeadline() {
    for (; i < itemsToRender.length; i++) {
      if (window.performance.now() >= deadline) {
        requestAnimationFrame(drawWithDeadline);
        return; 
      }

      var item = itemsToDraw[i];
      // Draw item
    } 
  }); 
}

完整的代码在这个 JSFiddle 中:https://jsfiddle.net/fkfnjrc2/5/ .该代码执行以下操作:

• 在每一帧上，修改 Canvas 的 CSS transform 属性(这是并发运行的快速执行动画的示例)。
• 每隔一段时间，以如上所示的批量方式启动 Canvas 的重新渲染。

不幸的是，我在重新渲染 Canvas 内容时看到了可怕的卡顿。我似乎无法解释的是 Chrome 开发者工具时间轴的样子:

丢帧似乎是因为 requestAnimationFrame 没有在帧开始时调用，而是在理想的 16 毫秒周期结束时调用。如果回调在前一帧完成渲染后立即开始，代码很可能会及时完成。

渲染到屏幕外的 Canvas (https://jsfiddle.net/fkfnjrc2/6/)，然后将完整的图像复制到屏幕 Canvas 上有一点帮助，但卡顿仍然存在，具有完全相同的特征(延迟执行 rAF 回调)。

这段代码有什么问题？或者我的浏览器/机器有问题？我在 Windows 10 和 Mac OS 上的 Chrome (49.0.2623.112) 上看到了相同的行为。

Answer 1

这些问题似乎是由 Chrome 特定的 requestAnimationFrame 回调调度引起的。我已经提交了 bug为了跟踪这一点，它包含一些更简单的复制代码示例。