The event loop

The pieces

• Call stack: the functions currently running. JavaScript runs one thing at a time, top of the stack first.
• Host APIs: the browser (timers, network, DOM events) or Node.js (libuv: files, network, timers). They do the waiting outside your code.
• Macrotask queue (also called the task queue): callbacks of timers, I/O and events wait here.
• Microtask queue: promise reactions (then/catch/finally callbacks, code after await) and queueMicrotask callbacks wait here.
• Event loop: keeps checking: if the stack is empty, run all microtasks, then take the next macrotask, and repeat.

The order rule

1. Run the current script (synchronous code) to the end.
2. Run EVERY microtask in the queue, including new microtasks added while doing so.
3. (In a browser, the page may be repainted here.)
4. Take ONE macrotask (for example the oldest ready timer callback) and run it.
5. Go back to step 2.

Predicting output

console.log('1 script start');
setTimeout(() => console.log('5 timeout'), 0);
Promise.resolve().then(() => console.log('3 promise 1'))
                 .then(() => console.log('4 promise 2'));
console.log('2 script end');

1 script start
2 script end
3 promise 1
4 promise 2
5 timeout

await and the microtask queue

async function job() {
  console.log('B inside job');      // runs synchronously, up to the first await
  await null;
  console.log('D after await');     // a microtask
}
console.log('A');
job();
console.log('C');
// A, B inside job, C, D after await

An async function runs synchronously until its first await. The rest of the function continues later as a microtask, after the current synchronous code is done.

Why long loops freeze the page

While your code is running, the stack is not empty, so the event loop cannot run anything else: no clicks, no timers, no repainting. A loop that takes 3 seconds freezes the tab for 3 seconds. A setTimeout of 0 ms also waits until the stack is empty, so it can fire much later than asked.

const start = Date.now();
setTimeout(() => console.log('timer after', Date.now() - start, 'ms'), 0);
while (Date.now() - start < 200) {}  // busy for 200 ms
// timer after 200 ms (not 0!)

Node.js details

Node has the same idea with a few extras: process.nextTick callbacks run even before promise microtasks, and setImmediate runs in a later phase than timers. For most code, "sync first, then microtasks, then macrotasks" is enough.