Shivam's blog

25. Microtask Queues in JavaScript

Shivam Kumar's photo
Shivam Kumar
·

3 min read

In JavaScript, asynchronous programming is a fundamental concept that allows developers to perform tasks concurrently without blocking the main execution thread. While the event loop and the callback queue are well-known components of JavaScript's asynchronous model, microtask queues are less discussed but equally important. In this comprehensive guide, we'll explore microtask queues in detail, understand their role in JavaScript, and provide practical examples to demonstrate their usage.

What are Microtask Queues?

Microtask queues, also known as microtasks, are a part of JavaScript's concurrency model. They are used to manage and execute high-priority tasks asynchronously. Unlike the callback queue (used for tasks like setTimeout and I/O operations), microtask queues are executed at a higher priority during the JavaScript event loop.

Microtasks are typically used for tasks that need to be executed immediately after the current synchronous code finishes executing. Examples include promises, mutation observers, and other APIs that need to react to changes in the DOM or the JavaScript environment.

Microtask Queue Execution Order

Understanding the order in which microtasks are executed is crucial. When synchronous JavaScript code finishes executing, the JavaScript engine checks for tasks in the microtask queue before returning to the callback queue.

The order of execution within the microtask queue is typically:

  1. Promises: Promises and their then/catch handlers are the most common use of microtasks. When a promise is resolved or rejected, its associated callback is placed in the microtask queue.

  2. Mutation Observers: Mutation observers watch for changes to the DOM and trigger callbacks when changes occur.

  3. Process.nextTick (Node.js): In Node.js, process.nextTick is another source of microtasks, allowing callbacks to be executed immediately after the current operation.

  4. Other Microtasks: Other APIs may introduce their own microtasks.

Practical Examples

Let's explore some practical examples of microtask queues in action.

Example 1: Promises

console.log('Start');

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

console.log('End');

In this example, the order of execution is as follows:

  1. "Start" is logged to the console.

  2. "End" is logged to the console.

  3. Both "Promise 1 resolved" and "Promise 2 resolved" are logged to the console, showing that promise callbacks are executed in the microtask queue after the synchronous code completes.

Example 2: Mutation Observer

console.log('Start');

const target = document.createElement('div');
const observer = new MutationObserver(() => {
  console.log('DOM mutated');
});

observer.observe(target, { attributes: true });

target.setAttribute('data-example', '123');

console.log('End');

In this example, the mutation observer watches for changes to the DOM. The order of execution is as follows:

  1. "Start" is logged to the console.

  2. The mutation observer is set up.

  3. target.setAttribute('data-example', '123') triggers a DOM mutation.

  4. "DOM mutated" is logged to the console.

  5. "End" is logged to the console.

Use Cases for Microtask Queues

Microtask queues are essential for scenarios where you need to ensure that certain tasks are executed immediately after the current code block completes. Some common use cases include:

  • Handling promises: Executing promise callbacks as soon as the promise is resolved or rejected.

  • Reacting to DOM changes: Using mutation observers to respond to changes in the DOM.

  • Ensuring consistency in application state after synchronous code execution.

Conclusion

Microtask queues are a crucial part of JavaScript's concurrency model, allowing high-priority tasks to be executed immediately after the current code block finishes executing. Promises, mutation observers, and other APIs leverage microtask queues to ensure responsiveness and maintain consistent application state. Understanding microtask queues is essential for building robust and efficient asynchronous JavaScript applications.

Node.jsJavaScript