Jake Archibald: “In The Loop” — Taking a close look into the browser’s Event Loop

Talk by Jake Archibald, as brought at JSConf.Asia 2018, taking a close look into the browser’s Event Loop:

This talk looks at the browser’s event loop, the thing that orchestrates the main thread of the browser, which includes JavaScript, events, and rendering. We’ll look at the difference between tasks, microtasks, requestAnimationFrame, requestIdleCallback, and where events land.
Hopefully you’ll never have to use setTimeout hacks again!”

And yeah, I’ve also used getComputedStyle() in the middle of some JS code before, in order to force layout/re-rendering 😬


Additionally you might also want to read How JavaScript works: Event loop and the rise of Async programming by Alexander Zlatkov, which also has a nice visualisation of what’s going on.

Once saw an interactie version of the visuals as shown in Alexander Zlatkov’s post. I think it was in a talk, yet can’t seem to find it back anywhere … if someone could point me to it, feel free to comment 😉

UPDATE: Found it! The tool is named Loupe, and I saw it in this talk by Philip Roberts:

Published by Bramus!

Bramus is a frontend web developer from Belgium, working as a Chrome Developer Relations Engineer at Google. From the moment he discovered view-source at the age of 14 (way back in 1997), he fell in love with the web and has been tinkering with it ever since (more …)

Leave a comment

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.