jsperf 测试 setInterval() 与 requestAnimationFrame()答案

【问题标题】：jsperf testing setInterval() vs requestAnimationFrame()jsperf 测试 setInterval() 与 requestAnimationFrame()
【发布时间】：2014-12-11 22:59:44
【问题描述】：

有人能解释为什么turnEvenOld(250, 250)(0.089ms) 的运行速度比turnEvent(250, 250)(0.447ms) 快得多吗？

我认为使用requestAnimationFrame() 比setInterval() 运行起来更快更便宜？

setInterval()：

var turnEventOLD = function turnEvent(AnX, AnY) {
    ----VARIABLES----
    temp = setInterval(myAnimation1, 1000/60);
    function myAnimation1() {
        ----DRAWINGCANVAS------
        -----
        ----CONDITIONS--------
        if (one301 && one401) {
            clearInterval(temp);
        }
    }
}

requestAnimationFrame()：

var turnEvent = function turnEvent(AnX, AnY) {
   ----VARIABLES-----
    function render() {
        ----DRAWING CANVAS-----
        ------
        ----CONDITIONS---------
        if (one301 && one401) {
            ---stop requestAnimation--
        }
    }
    (function animloop(){
        ----CONDTION-----
        requestAnimationFrame(animloop);
        render();
    })();
}

【问题讨论】：

turnEventOLD 不起作用（延迟函数除外），turnEvent 在完成之前调用渲染。还要记住，requestAnimationFrame() 可能会导致每秒运行超过 60 次渲染，因此会占用更多 CPU。

标签： javascript performance jsperf

【解决方案1】：

RequestAnimation 帧不一定比 setInterval“快”。它实际上做了一些不同的事情。

setInterval 将等待给定的毫秒数，而 requestAnimationFrame 将等待页面准备好重新绘制。根据 setInterval 调用中的时间，setInterval 等待的时间可能比下一次重绘前的时间更短或更长。

最好将 requestAnimationFrame 用于动画，这样您就可以确定在下一次重绘之前更改视觉元素，而不是可能与页面重绘不同步。

【讨论】：

我只是不明白性能或效率增益？在这种情况下没关系？
哪个更高效并不重要，更重要的是确保您在正确的时间更改视觉效果。如果您的间隔比重绘快，您将丢帧。如果你的间隔比重绘慢，你会得到重复的帧。如果您接近重绘速度，情况会更糟，因为您将得到混合的丢失帧和双帧，并且您的动画看起来不会那么流畅。您通常会感到有些不安。使用 requestAnimationFrame 可确保您与重绘完全一致。
感谢您的解释:-)。现在我更好地理解了它的目的。我对结果很满意。每天学习：D
@MarkFuzz 我刚刚用requestAnimationFrame() 替换了用于为一堆组件制作动画的setInterval()，并且在Chrome 中requestAnimationFrame 的性能似乎很糟糕。我很惊讶。也许每次使用 requestAnimationFrame 将回调加入队列的成本更高，而 setInterval 只需在计时器启动时加入队列？
我还没有看到明确的说法，但我的印象是requestAnimationFrame() 更多地用于单个回调执行页面上的所有动画的情况（尤其是视频游戏），例如），而不是被一堆独立动画的组件使用。