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.

Featured Partners

Related 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

JavaScript the Grumpy Parts46:08

JavaScript the Grumpy Parts

Rob Richardson

Beats in the Browser: Coding Music with JavaScript32:54

Beats in the Browser: Coding Music with JavaScript

Rowdy Rabouw

Leveraging Server-Sent Events (SSE) for Efficient Data Streaming in UI Development53:45

Leveraging Server-Sent Events (SSE) for Efficient Data Streaming in UI Development

Rainer Stropek

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

Things I learned while writing high-performance JavaScript applications

Michele Riva

10 must-know design patterns for JS Devs28:13

10 must-know design patterns for JS Devs

Erick Wendel

Snappy UI needs no Single-Page Application40:24

Snappy UI needs no Single-Page Application

Clemens Helm

The Lean Web46:46

The Lean Web

Chris Ferdinandi

From learning to earning

Jobs that call for the skills explored in this talk.

Javascript Developer

Crowmie
Municipality of Valencia, Spain

API
REST
Scrum
JavaScript
TypeScript
+1

Javascript Developer

Thegiglab
The Hague, Netherlands

Node.js
Angular
Ember.js
JavaScript
Knockout.js