Skip to content
0:00 / 0:00

#eventloop#javascript#v8

JavaScript Visualized - Event Loop, Web APIs, (Micro)task Queue

Lydia Hallie

120K subscribers • 2 videos on Hallway

YouTube
  • Recommended by 4 people: 4 in engineering communities.
  • Presented by Lydia Hallie

Intermediate. Assumes working knowledge.

1.2M views2 years ago4 recommendations

Web developmentProgramming languagesJavaScriptHow browsers workNode.js, Deno and Bun

Lydia Hallie visualizes how the browser event loop, call stack, Web APIs, and task queues coordinate to execute asynchronous JavaScript.

Learn how the browser event loop, task queue, microtask queue, and Web APIs work together to enable non-blocking, asynchronous JavaScript. - patreon.com/LydiaHallie - buymeacoffee.com/lydiahallie - twitter.com/lydiahallie - linkedin.com/in/lydia-hallie/ - instagram.com/theavocoder Timestamps: Intro Call Stack Single-threaded Problem Web APIs Callback-based APIs Task Queue setTimeout Microtask Queue Promisifying Callbacks Challenge Recap Outro

Why it's here

4 people recommend this

What people say. Highly recommended as the clearest visual explanation of the JavaScript event loop and microtask queues.

u/alonsonetworkin r/elixir • Recommends

On “Choosing Phoenix LiveView - The difficulties deciding between LiveView and traditional web frameworks”

…ht forward. Pattern matching is wonderful and more intuitive than a lot of what we do in other languages. Phoenix itself isnt bad. The abstractions over erlang aren't bad. Probably needs some visuals to go along with elixir to understand the underlying infrastructure of the language, like what Node has with event loop. Let me show you an example: link to this video Idk if that exists for elixir. I paid for a course at the time I learned it, which was like 20 hours of deep dive into BEAM, syntax, and erlang, but I was already invested. Just some thoughts...…

u/Solonotixin r/node • Recommends

On “Event Loop Phases and queues”

[Here is a really good video explaining everything you might want to know about this topic] The short of it: there is only one event loop per process, and it pushes asynchronous tasks to the Task Queue. There is also a Microtask Queue that tracks a separate set of queued items (usually promises, but also `setImmediate` IIRC). Each pass on the event loop will resolve all pending microtasks before the next item is handled.

u/AmSoMadin r/node • Recommends

On “Confused with Difference between task queues and phases of event loop”

Only thing that jumps to mind is: [video however everyone I know has already seen it (maybe it's different for your demographics).

u/alonsonetworkin r/node • Recommends

On “i want to know about this.”

link to this video Long version link to this video Highly recommend watch all her series. I think she does the best job of all nodejs event loop videos and tutorials I've ever seen. This is top-notch stuff to deeply ingrain into your psyche. Your level of nodejs and JS debugging is gonna skyrocket when you do. Fantastic intuition on your part.

u/Steadexein r/node • Recommends

On “Async/Await concept misunderstanding”

It can also help you to understand how and when things get executed (in which order), it helped me a lot link to this video

u/rnsbrumin r/node • Mentions

On “Running parallel code - beginner question”

The data processing is CPU bound, it is thread blocking, there is no running it simultaneously, unless you use worker threads(research it). Only code that can be run in parallel is I/O. Analogy: I/O task: like asking a waiter for food. You can chat with friends while waiting. CPU task: like cooking yourself. You’re stuck in the kitchen until it’s done. In other languages likes Java you would just run a thread pool to achieve this easily, but not in NodeJS. Ask ChatGPT to help you out with code examples on this. There is no better way to understand the event loop and task queue other than vizualizing it, this video taught me in 20 minutes what dozens hours of reading couldnt. link to this video