The Event Loop

Yes. If your microtask queue never empties — for example, a Promise .then() that always enqueues another microtask — the macrotask queue never gets a turn. No rendering. No user events. The browser freezes.

// 🚨 This will FREEZE your browser
function infiniteMicrotasks() {
  Promise.resolve().then(infiniteMicrotasks);
}
infiniteMicrotasks();
// The macrotask queue (rendering, clicks) never runs!

Rule of Karma: What you create in the microtask queue, you must also drain. Infinite promises = infinite suffering.

Both schedule a microtask. But queueMicrotask(fn) is more explicit, doesn't create a Promise object, and doesn't swallow errors. Promise.resolve().then(fn) has overhead — a full Promise object is created. For high-performance hot paths, queueMicrotask is lighter.

The browser Event Loop is specified by the HTML spec. Node.js uses libuv, a C++ library, which adds more phases. Node's loop has:

process.nextTick() and Promise microtasks run between every phase. setImmediate() runs after the poll phase (roughly equivalent to setTimeout(fn, 0) but more predictable in Node).

requestAnimationFrame() is neither a microtask nor a standard macrotask. It runs at the render step, which happens after macrotasks but before the browser paints the next frame (~16ms for 60fps). The order in browsers is:

This is why rAF-based animations are smooth — they're synchronized with the browser's natural render cycle, unlike setTimeout-based animations which can drift.

async/await is syntactic sugar over Promises — but there's subtlety. Each await creates a suspension point. The code after await becomes a microtask callback. Understanding this matters for performance.

async function fetchData() {
  console.log('A');            // sync — runs now
  await Promise.resolve();   // suspension point
  console.log('B');            // microtask — runs after stack clears
  await fetch('/api');       // suspension — waits for network
  console.log('C');            // microtask after network resolves
}

fetchData();
console.log('D');  // sync — runs BEFORE B and C

// Output: A → D → B → C

Any synchronous task that runs longer than 50ms is a "Long Task" (as defined by the Chrome team). Since JS is single-threaded, a Long Task blocks: rendering, user input handling, and all queued tasks.

// Modern way to yield back to the browser
async function processLargeArray(items) {
  for (let i = 0; i < items.length; i++) {
    processItem(items[i]);
    // Yield every 50 items to stay responsive
    if (i % 50 === 0) {
      await new Promise(res => setTimeout(res, 0));
    }
  }
}