NodeJS MacroTasks and MicroTasks

Introduction

🌀 JavaScript's event loop is what makes Node.js's non-blocking operations work, but understanding how it handles tasks can be tricky! 🧩 In this guide, we’ll explain the difference between microtasks and macrotasks 🔍 and how they affect your Node.js apps. 🚀

How Event Loop

The event loop is a fundamental part of JavaScript's non-blocking model, especially in environments like Node.js. It allows JavaScript to handle asynchronous operations like I/O, timers, and events without blocking the main thread.

During the execution of synchronous code, any asynchronous operation will be placed into a specific queue based on its type to be processed later, after the synchronous code has been executed. If it's a macrotask, it will be placed in the macrotask queue 🗂️ if it's a microtask, it will go into the microtask queue 🏃‍♂️. The event loop 🔄 handles these asynchronous operations by checking the queues. It always checks the microtask queue first 🏆 because it has higher priority than the macrotask queue 🛑. This ensures that small tasks are handled quickly before larger ones.

🔁Iterations or Cycles

An iteration (or cycle) occurs when the event loop picks a task from one of the queues 📬 and starts processing it. While the task is being executed, we refer to this period as the current iteration ⏲️

What Are Tasks?

📝 Before we get into the details, let’s talk about tasks in Node.js. Tasks are bits of work that the JavaScript engine needs to handle—like running code, responding to events, or executing callbacks. In Node.js, tasks are categorized into microtasks and macrotasks . How these tasks are scheduled and run can make a big difference in how your app performs and behaves. 🚀

Macrotasks (Tasks)

Macrotasks are what we typically call "tasks" in Node.js. They represent the broader units of work that need to be completed, executed one at a time in the event loop. Here are some common examples of macrotasks, with explanations and examples:

⏳ setTimeout()

Schedules a task to run after a specified delay.

setTimeout(() => {
  console.log('This is will run after 10ms');
}, 10);

🔄 setInterval()

Runs a task repeatedly at specified intervals

setInterval(() => console.log('Repeating every 2 seconds!'), 2000);

🏃setImmediate()

Executes a task immediately after the current event loop iteration

setImmediate(() =>
  console.log('Executed immediately after the current iteration.')
);

📤I/O operations

Handles tasks like file reading/writing or network requests

fs.readFile('file.txt', () => console.log('File read complete!'));

📢Event callbacks

Executes a task in response to an event, like a button click or an incoming request

button.addEventListener('click', () => console.log('Button clicked!'));

🖌️UI rendering

Handles rendering tasks in browser-based environments

//Rendering a DOM change after user interaction

Microtasks

Microtasks are smaller units of work that are executed immediately after the current synchronous code completes, but before the next macrotask begins. ⏳ They have higher priority than macrotasks. 🚀 Common sources of microtasks include:

💬Promise callbacks

These are used to handle the result or error of a Promise after it resolves or rejects. They are added to the microtask queue to be executed after the current synchronous code finishes, but before any macrotasks.

Promise.resolve().then(() => {
  console.log('This is a microtask');
});

⏱️process.nextTick()

This function schedules a callback to be invoked in the next iteration of the event loop, before any other I/O or timers. It has the highest priority among all microtasks.

process.nextTick(() => {
  console.log('Next tick callback!');
});

🚀queueMicrotask()

This method allows you to schedule a microtask that will execute after the current operation completes but before any macrotasks are processed

queueMicrotask(() => {
  console.log('Microtask executed!');
});

🔍MutationObserver callbacks

These are invoked after detecting changes in the DOM structure, such as element additions or removals. They are processed as microtasks after the synchronous code execution

const observer = new MutationObserver(() => {
  console.log('DOM changed!');
});

The Execution Order

Understanding the execution order is essential here's how Node.js processes tasks:

🥇Execute all synchronous code
🥈Execute all tasks in the microtask queue
🥉 Execute one task from the macrotask queue
⤴️Return to step 2

console.log('Script start');

setTimeout(() => console.log('Timeout 1'), 0);

Promise.resolve()
  .then(() => console.log('Promise 1'))
  .then(() => console.log('Promise 2'));

setTimeout(() => console.log('Timeout 2'), 0);

console.log('Script end');

// Output:
// Script start
// Script end
// Promise 1
// Promise 2
// Timeout 1
// Timeout 2

💎The process.nextTick() Special Case

In Node.js, process.nextTick() is a special case that takes priority over all other microtasks. It will execute immediately after the current synchronous operation completes, even before other microtasks:

Promise.resolve().then(() => console.log('Promise'));
process.nextTick(() => console.log('nextTick'));
setTimeout(() => console.log('setTimeout'), 0);

// Output:
// nextTick
// Promise
// setTimeout

Conclusion

The event loop is key to handling asynchronous operations in Node.js. By understanding how microtasks and macrotasks work, developers can better manage task execution and improve application performance. This leads to faster, more responsive applications that handle multiple tasks without blocking the main thread.