requestAnimationFrame右帧结束之前叫什么名字？ [英] requestAnimationFrame called right before the end of the frame?

问题描述

我一直在尝试与HTML5画布复杂场景的免费JANK渲染。我们的想法是分割渲染成多个批次，每个批次最多接受，使得同时运行的动画（很便宜执行）不会中断，说12毫秒。

从概念上讲，批次渲染这样实现的：

 函数draw（CTX）{
  VAR期限= window.performance.now（）+ 12; //不准确，但足以为例子
  变种I = 0;
  requestAnimationFrame（功能drawWithDeadline（）{
    对于（; I＆LT; itemsToRender.length;我++）{
      如果（window.performance.now（）＆GT =截止）{
        requestAnimationFrame（drawWithDeadline）;
        返回;
      }      VAR项目= itemsToDraw [I]
      //绘制项目
    }
  }）;
}
 

完整code是在这的jsfiddle： https://jsfiddle.net/fkfnjrc2/5/ 。在code做以下的事情：

• 在每一帧，修改CSS变换画布的财产（这是一个例子并发运行快速到执行动画）。


• 在一段时间后，开始在成批时尚帆布重新渲染如上图所示。

不幸的是，我看到可怕janks正是在时代当画布内容重新渲染。我似乎不能够解释的是Chrome开发者工具的时间表是什么样子：

的丢帧似乎由一个事实，即 requestAnimationFrame 不是就在帧的开始调用引起的，但在接近理想16ms的周期的结束。如果回调previous框架后立即开始完成了渲染时，code最有可能完成的时间。

渲染到离屏画布（ https://jsfiddle.net/fkfnjrc2/6/），然后将完整映像复制到屏幕画布上帮助了一点，但janks仍然存在完全相同的特性（RAF回调延迟执行）。

什么是错code？或者，也许什么是错的我的浏览器/机器？我在Windows 10和Mac OS看到在Chrome（49.0.2623.112）相同的行为。

解决方案

这些问题似乎

通过Chrome的具体requestAnimationFrame回调调度引起的。我已经提交了错误跟踪此，它包含了一些简单再生产code的例子。

I've been experimenting with jank-free rendering of complex scenes on HTML5 canvas. The idea is to split rendering into multiple batches with each batch taking a maximum of, say 12 ms, so that the concurrently running animations (very cheap to execute) are not interrupted.

Conceptually, batch-rendering is implemented like this:

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
    } 
  }); 
}

The complete code is in this JSFiddle: https://jsfiddle.net/fkfnjrc2/5/. The code does the following things:

• On each frame, modify the CSS transform property of the canvas (which is an example of the concurrently-running fast-to-execute animation).
• Once in a while, initiate re-rendering of the canvas in the batched fashion as shown above.

Unfortunately, I'm seeing horrible janks exactly at the times when canvas contents is re-rendered. What I don't seem to be able to explain is what the Chrome Developer Tools timeline looks like:

The dropped frames seem to be caused by the fact that the requestAnimationFrame is not called right at the start of the frame, but towards the end of the ideal 16ms period. If the callback started right after the previous frame completed rendering, the code would most likely complete in time.

Rendering to an off-screen canvas (https://jsfiddle.net/fkfnjrc2/6/) and then copying the complete image to the screen canvas helps a little, but the janks are still there with exactly the same characteristics (delayed execution of rAF callback).

What is wrong with that code? Or maybe something's wrong with my browser / machine? I'm seeing the same behaviour on Chrome (49.0.2623.112) on Windows 10 and Mac OS.

解决方案

The issues seem to be caused by Chrome's specific requestAnimationFrame callback scheduling. I've filed a bug to track this, it contains some simpler reproduction code examples.

这篇关于requestAnimationFrame右帧结束之前叫什么名字？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！