atotic / event-loop Goto Github PK

Can we please add explanation on what exactly vSyncTime() does within

needsRendering: function() {
    return vSyncTime() && (needsDomRerender() || hasEventLoopEventsToDispatch());
}

In the repo, it mentions that the event loop tick picks out the oldest task in the queue, executes it, checks if rendering needs to be done, and after all that, moves onto the next tick.

while(true) {
    task = eventLoop.nextTask();
    if (task) {
        task.execute();
    }
    eventLoop.executeMicrotasks();
    if (eventLoop.needsRendering())
        eventLoop.render();
}

So, with that in mind, if I have two timers installed with setTimeout(fn, o) and the first timer callback dirties the DOM.

setTimeout(() => {
    document.body.innerText = 'DOM updated';
}, 0);

setTimeout(Function.prototype, 0);

I would expect the event loop to do the work in following order:

1. Pick setTimeout callback and execute
2. Rendering is necessary, so hit the rendering pipeline
3. Pick next setTimeout callback and execute

But in Chrome's flame chart, I see

1. setTimeout
2. setTimeout
3. rendering

Whats the explanation for this?