Comment by VA on "Browser Event loop: micro and macro tasks, call stack, render queue: layout, paint, composite"

CommentBrowser Event loop: micro and macro tasks, call stack, render queue: layout, paint, composite

Frontend

Apr 24, 2023

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?

Nik

SWE@Meta, Whatsapp

Apr 28, 2023

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

Frontend

Apr 28, 2023

Nik Thanks for your detailed reply! Look forward to your upcoming articles about those topics like this

Search Hashnode