RequestAnimationFrame滞后于chrome时间轴

Question

我对DevTools中的Google Chrome和时间线标签有疑问。 我使用带有递归调用的window.requestAnimationFrame（）：

function animateRequestAnimationFrame(element, animation, timing, time) {
    (function nextAnimationFrame() {
        window.requestAnimationFrame(function (elapsed) {
            var progress = elapsed / time;

            if (progress < 1) {
                animation(element, timing(progress));
                nextAnimationFrame();
            } else {
                animation(element, timing(1));
            }
        });
    })();
}

在时间轴中，我看到了这一点：。 为什么每个RequestAnimationFrame回调都不在帧的开头？

Answer 1

因为那是 requestAnimationFrame 的 definition：

<块引用>

window.requestAnimationFrame() 方法告诉浏览器您希望执行动画，并请求浏览器在下次重绘之前调用指定的函数来更新动画。该方法将回调作为参数，在重绘之前调用。