2Minutes: Macrotasks In JavaScript

In the Microtasks post, we said Promises always cut the line. In the Event Loop post, we called the line they cut in front of “the regular ticket rail.” Today that rail finally gets its real name: the Macrotask Queue.

What is a Macrotask?

A macrotask (often just called a “task”) is any callback that comes from setTimeout, setInterval, a DOM event like a click, or I/O finishing up. The rule the Event Loop follows is strict: finish the current synchronous code, drain the entire Microtask Queue, then pull exactly one macrotask off the queue and run it. Not two. Not all of them. One.

console.log("start");

setTimeout(() => {
  console.log("macrotask 1");
  Promise.resolve().then(() => console.log("microtask from macrotask 1"));
}, 0);

setTimeout(() => console.log("macrotask 2"), 0);

Promise.resolve().then(() => console.log("microtask 1"));

console.log("end");

// Output: start, end, microtask 1, macrotask 1, microtask from macrotask 1, macrotask 2

console.log("start");

setTimeout(() => {
  console.log("macrotask 1");
  Promise.resolve().then(() => console.log("microtask from macrotask 1"));
}, 0);

setTimeout(() => console.log("macrotask 2"), 0);

Promise.resolve().then(() => console.log("microtask 1"));

console.log("end");

// Output: start, end, microtask 1, macrotask 1, microtask from macrotask 1, macrotask 2

Notice that microtask from macrotask 1 runs before macrotask 2, even though macrotask 2 was already sitting in the queue, waiting. A microtask created during a macrotask still gets to cut in front of the next macrotask. The Event Loop doesn’t just drain microtasks once — it checks the Microtask Queue after every single macrotask, no exceptions.

The Repaint Trap

Here’s the part that actually matters for real apps: the browser only gets a chance to repaint the screen between macrotasks, never between microtasks. So if you chain a hundred .then() calls back to back, the browser can’t paint a single frame until that whole chain finishes — it looks async, but it can still freeze your UI. Break the same work into a hundred setTimeout calls instead, and the browser gets a breathing room to repaint after each one.

The takeaway for today is: macrotasks are the Event Loop’s “one at a time, then breathe” unit. Every microtask, even ones created mid-macrotask, runs before the next macrotask starts — and that gap between macrotasks is also the browser’s only real chance to paint.

That’s 2Minutes Concept, see you in the next one!

Sources

https://crosscheck.cloud/blogs/javascript-event-loop-explained

https://dev.to/dinhkhai0201/how-the-event-loop-handles-microtasks-and-macrotasks-4hi7