javascript - jsperf 测试 setInterval() 与 requestAnimationFrame()

Question

有人可以解释为什么 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();
    })();
}

Answer 1

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

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

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