Javascript RequestAnimationFrame在chrome时间线中滞后

我对DevTools中的Google Chrome和Timeline选项卡有一个问题。 我使用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));
            }
        });
    })();
}

函数animateRequestAnimationFrame（元素、动画、计时、时间）{
（函数nextAnimationFrame（）{
window.requestAnimationFrame（函数（已运行）{
var进度=已用时间/时间；
如果（进度<1）{
动画（元素、计时（进度））；
nextAnimationFrame（）；
}否则{
动画（元素、计时（1））；
}
});
})();
}

在时间轴中，我看到以下内容：。 为什么每个RequestAnimationFrame回调都不在帧的开头？

因为这是

RequestAnimationFrame

的原因：

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