嵌套的 requestAnimationFrame 调用 - 重绘和回调调用的顺序

Question

我试图了解 requestAnimationFrame 的工作原理，以便我确切地知道在使用它时会发生什么行为。据我了解，当我调用 requestAnimationFrame 时，它“告诉”浏览器我想在下一次重绘之前的某个时间调用我作为参数传递给它的函数。我希望这个函数在下一次重绘之前肯定会被调用，无论何时。我不认为重绘一定会在我的函数被调用后立即发生。

说我有这样的东西：

requestAnimationFrame(() => {
    do_1st_thing();
    requestAnimationFrame(() => {
        do_2nd_thing();
        requestAnimationFrame(() => {
            do_3rd_thing();
            requestAnimationFrame(() => {
                do_4th_thing();
                requestAnimationFrame(() => {
                    do_5th_thing();
                })
            })
        })
    })
});

我假设通常这样的事情会发生，顺序是：

1st thing
repaint
2nd thing
repaint
3rd thing
repaint
4th thing 
repaint
5th thing
repaint 

我假设这样的事情可能也会发生：

1st thing
2nd thing
repaint
3rd thing
4th thing 
repaint
5th thing
repaint 

但一般来说，我希望在事物 1、事物 2、事物 3 等之间会有重绘。

让我感到困惑的是我不知道为什么会这样。根据我目前的理解，它“应该”是这样的：浏览器即将进行重绘。在某个时候最外层的 rAF 调用发生了，所以它知道它需要做事情 1 并在它可以重绘之前再次调用 rAF。因此，它执行第 1 件事，调用 rAF，此时它被告知在下一次重绘之前，还有更多的事情要做（第 2 件事，和另一个 rAF 调用）。 现在，它是决定继续重绘并……将第 2 件事和下一个 rAF 调用排在 重绘之后它要执行的 之前，还是……只是立即执行*？我假设不是，但我不确定为什么，除了它会很愚蠢。

我的第二个问题是，假设事物 1、事物 2、事物 3 等之间存在重绘：是否可以保证 always 它们之间会重绘？

*最终导致此订单：

thing 1
thing 2
thing 3
thing 4
thing 5
repaint