Sync, Microtask, Macrotask — What Prints First?

·Easy·Event Loop

setTimeout 0 vs promise.then vs queueMicrotask · the canonical ordering question

Practice mode

Step

The script is itself a task

Running the file is the first task of the loop. console.log prints synchronously.

Algorithm workspace

Execution

Step 1 / 11init

100%

browser

task

→microtasks

→render

↻

running: main script

Call stack

the whole file is one task

Queues

Microtasksmicrotask

drained fully after every task, before rendering

empty

Tasks (timers, events)macrotask

one per loop turn

empty

Console output

1script start

one task runs to completion → microtask queue drains → next task · a 0 ms timer is still a task

Explanation

Nothing in the queues can run while this frame is on the stack. Every ordering surprise in JavaScript comes back to that one rule.

step 1 / 11

Space play← → stepHome reset

Time—·SpaceO(n) queued callbacks

Execution

1console.log('script start');//stack: 1output: 1
2 
3setTimeout(() => {
4  console.log('setTimeout 0');
5}, 0);
6 
7Promise.resolve().then(() => {
8  console.log('promise.then');
9});
10 
11queueMicrotask(() => {
12  console.log('queueMicrotask');
13});
14 
15console.log('script end');

stack1

output1

Command Palette

Sync, Microtask, Macrotask — What Prints First?