Contradiction between text and diagram on order of microtasks vs rendering?

[paroche]

In the article:
https://javascript.info/event-loop

From the comments:

`Stanislav Nesnov Devil Says Hi • 17 days ago • edited
"Immediately after every macrotask, the engine executes all tasks from microtask queue, prior to running any other macrotasks or rendering or anything else."
This statement from the text contradicts to the last Event Loop diagram which shows rendering happens in between Macrotask and Microtasks execution.

Looks that way to me too.

[iliakan]

The picture gives the following sequence:
setTimeout → microtasks → rendering → mousemove → ...

Do you perceive it another way?

[paroche]

Under the heading "Macrotasks and Microtasks", in the diagram labeled "Event Loop" on the left, I see, in the loop on the right:

script
  render
  microtasks
mousemove
  render
  microtasks
setTimeout
  (loop back to 'script')

but then it immediately says:
"All microtasks are completed before any other event handling or rendering or any other macrotask takes place."

[iliakan]

Do you read the events as they happen from top to bottom OR from bottom to top?

[paroche]

Following the direction of the arrow -- clockwise, which on the right, is from top to bottom as laid out above.

[paroche]

[iliakan]

In the first version of this picture, the order was top to bottom.

But many people were actually reading it as events happen bottom to top, so I repainted it, and now it's bottom to top: first setTimeout, then microtasks,and so on.

I'm not sure about which order is correct, one could argue, but as different people see it differently, looks like both are (somewhat).

I added the note about it being bottom to top.

[paroche]

Are you going to change the direction of the arrow?

[iliakan]

If I do so, many people will still be mistaken. I added a note just above the picture.

[paroche]

Having the loop arrow point clockwise (down) while execution order runs counter-clockwise (up) is what you want? I don't get that at all.

[iliakan]

Yeah, the first edition of the picture had the arrow reversed.

And people didn't get it, I got complains :/

[paroche]

With arrow pointing in the opposite direction to the order of execution, I'd think you may get complaints now. Don't see how it makes sense to have arrow pointing that way with items in order they are. What if you reversed the order of the events themselves? (setTimeout on top, then microtasks, then render, then mousemove, microtasks, render, then script on the bottom). Wouldn't that be more consistent? Also, wouldn't there be microtasks and render following "script", like with the other macrotasks?

[paroche]

But I truly don't understand why you would now have the macrotasks running from top to bottom. This illustration looks like, and is introduced ("The richer event loop picture looks like this") like, it was supposed to be an expansion of the first illustration in the "Event Loop" section:


,which I think could be successfully and straightforwardly accomplished, while remaining consistent with the text, by just, in the illustration directly above, putting the microtasks above the renders (and, for completeness and consistency, putting microtasks, then render underneath "setTimeout" before the loop back to the top).

[iliakan]

Did it =)

[paroche]

But it still has the renders before the microtasks in the diagram. That's the main think I think needed to be changed.

From the text: "Immediately after every macrotask, the engine executes all tasks from microtask queue, prior to running any other macrotasks or rendering or anything else."

The diagram doesn't reflect that.

[iliakan]

It's like this now:

[paroche]

That looks good to me, though I don't see it on the article page (even after refreshing).

[iliakan]

clear cache? (refreshed server cache)

[paroche]

I did ctrl-refresh and now it shows right.