requestAnimationFrame（）如何工作？

Question

var balls = [];

function loop() {
    ctx.fillStyle = "rgba(0, 0, 0, 0.25)";
    ctx.fillRect(0, 0, width, height);

    while(balls.length < 1) {
        var ball = new Ball();
        balls.push(ball);
    }

    for(i = 0; i < balls.length; i++) {
        balls[i].draw();
        balls[i].update();
        balls[i].collisionDetect();
    }

    requestAnimationFrame(loop); 
}

loop();

当第一次运行此代码时，draw（）方法完成后，球会出现在画布上，然后update（）更新球的x，y坐标值，然后更新requestAnimationFrame（）再次调用loop（）方法但是，这次draw（）方法完成时，球的位置不会立即更新，而是在下次调用requestAnimationFrame（）时更新球位置

这样的事情发生在代码中 请解释究竟发生了什么？

以及requestAnimationFrame（）如何工作？

完整代码：https://github.com/mdn/learning-area/blob/master/javascript/oojs/bouncing-balls/main-finished.js