Jake Archibald on the web browser event loop, setTimeout, micro tasks, requestAnimationFrame, ...
JSConf7 HN recommenders · recommended in 6 months, 2018–2023
talk · intermediate · evergreen · 2018–2023 on HN
Jake Archibald's JSConf.Asia 2018 talk "In the Loop" explains the browser event loop, covering tasks, microtasks, requestAnimationFrame, and how rendering interleaves with JavaScript. It uses visual walkthroughs to show why code runs in surprising orders and…
HN treats it as the best primer on the event loop, praising its entertaining, easy-to-grasp visual explanations.
Up next
14 mo on HNWhat the heck is the event loop anyway? | Philip Roberts | JSConf EU
JSConf
16 HN recommender · 2015–2025
1 mo on HNJordan Peterson | ContraPoints
ContraPoints
1 HN recommend · 2018–2021
1 mo on HNVoting Machines: Last Week Tonight with John Oliver (HBO)
LastWeekTonight
1 HN recommend · 2020–2023
8 mo on HNYour Brain Thinks Your Whole Home Is One Room
CGP Grey
17 HN recommender · 2020–2022
3 mo on HNJancovici : Will technology save us from Climate Change ? MIT Media Lab - 23/02/2021
Jean-Marc Jancovici
4 HN recommender · 2021–2024
3 mo on HNBuild Your Own Async
David Beazley
4 HN recommender · 2020–2023
15 mo on HNBut what is the Fourier Transform? A visual introduction.
3Blue1Brown
16 HN recommender · 2018–2025
2 mo on HNWho's faster around London: a taxi driver or a GPS?
Tom Scott plus
2 HN recommender · 2022–2026
13 mo on HNRich Harris - Rethinking reactivity
You Gotta Love Frontend
15 HN recommender · 2019–2026
10 mo on HNCrockford on JavaScript - Volume 1: The Early Years
YUI Library
10 HN recommender · 2013–2022
10 mo on HNRailsConf 2016 - Turbolinks 5: I Can’t Believe It’s Not Native! by Sam Stephenson
Confreaks
6 HN recommender · 2017–2020
10 mo on HNJavaScript: The Good Parts
Google TechTalks
11 HN recommender · 2009–2020
9 comments from Hacker News
The best primer for the event loop I have found is here: ▶ this video The speaker (Jake Archibald) has that rare ability to be both likeable and relatable, while also being incredibly knowledgeable and enthusiastic. I wish a lot more talks were like this!
Jake Archibald talking about the javascript event loop and actually making it both entertaining and easily grokable! ▶ this video
Jake Archibald's "In the Loop", Visual explanation of how the javascript event loop works! Awesome video for every javascript developer. ▶ this video
> It basically flickers between tasks very rapidly to simulate concurrency. That’s usually used a description of preemptive multitasking, like what you get running a modern OS on a single core (on multiple cores it’s also this but on each core). Every once in a small while, the current task is made to inhale chloroform, another task is chosen to wake and takes its place. Pro: you can’t hang any given task from a single thread; con: shared memory is very difficult to impossible, as you never know when you’ll be interrupted. Browser JavaScript and UI interactions instead use cooperative multitasking, which you’ll also find in classic Mac OS, 16-bit Windows, basically every embedded system ever, and languages like Python and Lua. A task has to explicitly call out to the scheduler to hand off execution resources to the next one. Pro: as task switching only happens at clearly visible points, many of the horrors of shared memory are diminished; con: you can and will hang the UI (or other outside-world interactions) if you accidentally write an infinite loop or just do too much CPU-bound work without yielding (as any developer using one of the aforementioned systems knows). For how this works in the browser environment specifically, see Jake Archbald’s superb talk[1]. [1] ▶ this video
Coming from C and having used thread and being totally ignorant to javascript, this article really helped me grasp async in js by clearing away implicit misconceptions I held : link And also that talk on the event loop : ▶ this video
I've been struggling with wrapping my head around asynchronous programming with callbacks, promises and async/await in JS, however I think it's finally clicking after watching these YouTube videos and creating a document where I explain these concepts as if I'm teaching them to someone else: * Philip Roberts's What the heck is the event loop anyway? - link * The Story of Asynchronous JavaScript - link * JavaScript Callbacks, Promises, and Async / Await Explained - link * Async Javascript Tutorial For Beginners (Callbacks, Promises, Async Await). - link * Jake Archibald: In The Loop - setTimeout, micro tasks, requestAnimationFrame, requestIdleCallback, - ▶ this video Edit... I've been rewatching these videos, reading the MDN docs, the Eloquent JavaScript book, javascript.info, blogs about the subject, etc. This further proves you shouldn't limit yourself to a single resource, and instead fill up the laguna with water from different sources if you will.
Be sure to understand the event loop. Javascript as an asynchronous language often comes back to bite beginners. Here are two great talks to help you: ▶ this video link Your life will be easier if you learn to use Chrome Dev tools (or the Firefox equivalent) early. In the beginning, you don't have to worry about browser compatibility - embrace modern JS (ES6+)!
I think there's never been a better time to be a JS developer. JS is now everywhere. It runs on browsers, it runs on servers, it runs on mobile devices. You can use it as a scripting language if you really hate python and ruby. You can compile it to webassembly. There's game engines that use JS. Typescript is great as JS projects grow larger and more complex (if you can get over the fact that reading complex types is stupid) So the more and more JS devs are coming in, the more we need JS experts who really understand how stuff works at lower levels. Like for example the browser event loop - ▶ this video Being an expert that deeply understands a tech stack will never go out of style
Just rewatched this talk on Monday from last year where Safari was called out for the rAF behavior that was fixed here. Cool to see this change. ▶ this video