Christian Woerz

The Eventloop in JavaScript - How does it work?

Why does a promise resolve before a `setTimeout` with a zero delay? The answer reveals the hidden priority inside JavaScript's event loop.

The Eventloop in JavaScript - How does it work?
#1about 4 minutes

Differentiating between a JavaScript engine and a runtime

A JavaScript engine implements the ECMAScript standard, while a runtime adds extra functionality like Web APIs and the event loop.

#2about 2 minutes

Understanding why JavaScript needs an event loop

JavaScript's single-threaded nature can block the UI, so the event loop is necessary to handle asynchronous operations without freezing the application.

#3about 7 minutes

Exploring the core components of a JavaScript runtime

A runtime consists of a call stack for synchronous code, Web APIs for browser or Node features, and separate queues for microtasks and macrotasks.

#4about 2 minutes

How the event loop prioritizes and executes tasks

The event loop continuously checks if the call stack is empty, then processes all available microtasks before handling a single macrotask.

#5about 4 minutes

Demonstrating setTimeout and the macro task queue

Code example shows how `setTimeout` with a zero delay is placed in the macrotask queue and executed only after the synchronous call stack is clear.

#6about 2 minutes

Prioritizing promises with the micro task queue

A resolved promise is handled as a microtask, which is always executed before macrotasks like `setTimeout` when the call stack is empty.

#7about 3 minutes

How network latency affects promise execution order

Using `fetch`, this example shows that a promise is only added to the microtask queue upon resolution, so a slow network request can execute after a faster macrotask.

#8about 3 minutes

Starving the macro task queue with micro tasks

A recursive `queueMicrotask` call demonstrates how continuously adding microtasks can prevent the event loop from ever processing the macrotask queue.

#9about 2 minutes

Final recap of the event loop's execution order

The event loop prioritizes the call stack first, then the entire microtask queue, and finally a single task from the macrotask queue.

Related jobs
Jobs that call for the skills explored in this talk.

Matching moments

Organizing a developer conference for 15,000 attendees
01:32 MIN

Organizing a developer conference for 15,000 attendees

Cat Herding with Lions and Tigers - Christian Heilmann

Selecting strategic partners and essential event tools
03:17 MIN

Selecting strategic partners and essential event tools

Cat Herding with Lions and Tigers - Christian Heilmann

Increasing the value of talk recordings post-event
04:57 MIN

Increasing the value of talk recordings post-event

Cat Herding with Lions and Tigers - Christian Heilmann

Using content channels to build an event community
04:49 MIN

Using content channels to build an event community

Cat Herding with Lions and Tigers - Christian Heilmann

Automating video post-production with local scripts
02:54 MIN

Automating video post-production with local scripts

Cat Herding with Lions and Tigers - Christian Heilmann

Establishing a single source of truth for all data
02:39 MIN

Establishing a single source of truth for all data

Cat Herding with Lions and Tigers - Christian Heilmann

Rapid-fire thoughts on the future of work
02:44 MIN

Rapid-fire thoughts on the future of work

What 2025 Taught Us: A Year-End Special with Hung Lee

Breaking down silos between HR, tech, and business
03:39 MIN

Breaking down silos between HR, tech, and business

What 2025 Taught Us: A Year-End Special with Hung Lee

Featured Partners

Related Videos

See all videos
Catching up on the basics you don't really need that much code14:44

Catching up on the basics you don't really need that much code

Chris Heilmann

Java 21: The Revolution of Virtual Threads - A Deep Dive55:30

Java 21: The Revolution of Virtual Threads - A Deep Dive

Christian Woerz

Multithreading in Javascript: A guide to Web Workers23:14

Multithreading in Javascript: A guide to Web Workers

Dani Coll

WeAreDevelopers LIVE – Frontend Inspirations, Web Standards and more1:06:20

WeAreDevelopers LIVE – Frontend Inspirations, Web Standards and more

Chris Heilmann, Daniel Cranney & Jan Deppisch

JavaScript the Grumpy Parts46:08

JavaScript the Grumpy Parts

Rob Richardson

Things I learned while writing high-performance JavaScript applications27:27

Things I learned while writing high-performance JavaScript applications

Michele Riva

Beats in the Browser: Coding Music with JavaScript32:54

Beats in the Browser: Coding Music with JavaScript

Rowdy Rabouw

Node.js: More Threads Than You Think24:08

Node.js: More Threads Than You Think

Matteo Collina

Related Articles

View all articles
DC
Daniel Cranney
Dev Digest 195: End of Likes, JavaScript’s a Zoo, and Messing with Bots!
Inside last week’s Dev Digest 195 . 👎 No more external likes 🤗 Needy programs 📉 The worst selling Microsoft product 🟨 JavaScript engines zoo 🍞 No more toasts! 🤖 Messing with bots 👔 Beware of fake job interviews 🗞️ Join over 150,000 developers alread...
Dev Digest 195: End of Likes, JavaScript’s a Zoo, and Messing with Bots!
DC
Daniel Cranney
Dev Digest 198: 30 years of JS, In-Browser AI, How Attackers Abuse GenAI
Inside last week’s Dev Digest 198 . 🎂 30 years of JavaScript ⏰ How long is a JavaScript second 💻 Clean code in Angular 🤦‍♂️ AI makes different mistakes than humans 👨‍💻 In-browser and offline AI 🟠 Undocumented Hacker News features 🐋 DeepSeek censored...
Dev Digest 198: 30 years of JS, In-Browser AI, How Attackers Abuse GenAI
CH
Chris Heilmann
Links and anchors: ancient HTML and JS magic in your browser
Have you ever wondered why you use an <a> element to add link to an HTML document? Paragraph is <p>, unordered list is <ul>, image is <img> but why <a> instead of <link>? Well, the reason is that the element both defines where to go to, but also an e...
Links and anchors: ancient HTML and JS magic in your browser

From learning to earning

Jobs that call for the skills explored in this talk.