u/fagnerbrackin r/Frontend • Recommends
Jake Archibald shows in a comprehensible way how the order of callbacks work in the Event Loop
0:00 / 0:00
#eventloop#settimeout#requestanimationframe
Jake Archibald on the web browser event loop, setTimeout, micro tasks, requestAnimationFrame, ...
JSConf
286K subscribers • 28 videos on Hallway
- Recommended by 8 people: 7 on Hacker News and 1 in engineering communities.
- A classic. People kept recommending it from 2018 to 2023.
- Presented by Jake Archibald, Developer Advocate for Google Chrome
- May be out of date. Uploaded 8 years ago, in an area where tools change fast.
Intermediate. Assumes working knowledge.
807K views8 years ago8 recommendations
Web developmentProgramming languagesJavaScriptHow browsers workWeb performance
Jake Archibald explains the browser event loop, detailing how tasks, microtasks, requestAnimationFrame, and rendering interleave on the main thread.
"In The Loop" presented by Jake Archibald at JSConf.Asia 2018 Have you ever had a bug where things were happening in the wrong order, or particular style changes were being ignored? Ever fixed that bug by wrapping a section of code in a setTimeout? Ever found that fix to be unreliable, and played around with the timeout number until it kinda almost always worked? 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!" Jake is developer advocate for Google Chrome. He's one of the editors of the service worker spec, so he's into offline-first, push messaging and web performance. JSConf.Asia - Capitol Theatre, Singapore - 27 January 2018 Source: 2018.jsconf.asia/ License: For reuse of this video under a more permissive license please get in touch with us. The speakers retain the copyright for their performances.Why it's here
8 people recommend thisWhat people say. Highly recommended as the clearest and most entertaining visual explanation of the browser event loop and asynchronous execution.
Moments people linked to
wattengardon Hacker News • Recommends
On “Ask HN: What are some of the best technical talks you've heard?”
Jake Archibald talking about the javascript event loop and actually making it both entertaining and easily grokable! link to this video
olavggon Hacker News • Recommends
On “Ask HN: What are some of the best technical talks you've heard?”
Jake Archibald's "In the Loop", Visual explanation of how the javascript event loop works! Awesome video for every javascript developer. link to this video
phist_mcgeeon Hacker News • Recommends
On “How does the event loop work in JavaScript? [video]”
The best primer for the event loop I have found is here: link to 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!
mxschumacheron Hacker News • Recommends
On “Ask HN: What you wish you'd known before getting into JavaScript?”
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: link to 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+)!
luuuzetaon Hacker News • Recommends
On “Ask HN: Do you recall any book or course that made a topic finally click?”
…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, - link to 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.…
cassepipeon Hacker News • Recommends
On “How to think about `async`/`await` in Rust”
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 : link to this video
mananaysiempreon Hacker News • Recommends
On “Populating the page: how browsers work”
…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 talk1. 1 link to this video…
u/wasupinternetin r/node • Mentions
Is there any source explaining how promises work in the event loop?
The official documentation only talks about callbacks and I've watched those and it's not fully clear.
The Node.js Event Loop: Not So Single Threaded
Node's Event Loop From the Inside Out by Sam Roberts, IBM
[Morning Keynote- Everything You Need to Know About Node.js Event Loop - Bert Belder, IBM]
Jake Archibald: In The Loop - JSConf.Asia 2018
the last one is about Js in general -browser event loop- but watched it anyway.
u/anonyuser415in r/Frontend • Mentions
FE interviews are harder than you expect
Every FE interview resource I see online asks the same trivia softball junk: *explain what event bubbling is*, *what is `this` in JS?*
You will almost certainly not be tested on this, and the FE engineer roles I'm applying for now are *substantially* harder than any online resource I've seen. Memorizing trivia will leave you embarrassed on a technical.
Your technical will instead almost certainly consist of writing *real code* on a live call with a senior engineer.
So, instead, work on your basic CS knowledge. Read up on Big O notation, and understand how to solve questions in an efficient manner in both time and space complexity. It is not very h…
Nickon Stack Overflow • Mentions
On “NextJS API Route Returns Before Data Received?”
…ole.log('end')
When you use setTimeout , the inner code is pulled out of the current event loop to run later. That's why end is logged before the timeout .
So when you use setTimeout to return the data, the function has already ended before the code inside the timeout even starts.
If you're new to the event loop, here's a really great talk: link to this video
returning inside setTimeout
However, there's another fundamental problem here. And it's that data r……
memcoon Hacker News • Mentions
On “Release Notes for Safari Technology Preview 81”
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. link to this video
ativzzzon Hacker News • Mentions
On “Ask HN: Should I move away from JavaScript based skillset because of saturation?”
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 - link to this video Being an expert that deeply understands a tech stack will never go out of style
u/No_Drive_5095in r/functionalprogramming • Mentions
On “Do you find functional programming to be more work (or harder work), up front?”
Sure! Here you go, it's Jake Archibald from Google: link to this video