CommentBrowser Event loop: micro and macro tasks, call stack, render queue: layout, paint, composite
Thanks for this comprehensive article! Can I ask a question? If we mutate and read the DOM separately twice like your example, does it pause the task and run the layout step before give the result back?
It might not run "The whole layout", as layout is quite complicated process which has many steps, it worth to make a separate article.
What can happen: the layout of the changes code has done + recalculate all "shifting" in the elements.
The simplest way to see it:
- Open you browser dev tools
- Go to Performance Tab
- Start recording
- Open a website (or make some actions on opened page)
- Stop recording
- Open "Event log"
Scroll to function call which makes Layerise step. Example:
Select it on a timeframe to see the calculations