Introduction to queue-microtask

The queueMicrotask method is crucial for optimizing JavaScript performance by allowing functions to be executed in the background without disturbing the main thread. Let’s dive into various APIs related to queueMicrotask and understand how to use them effectively.

How queueMicrotask Works

The queueMicrotask function queues a microtask to be executed when the current script execution completes. This method is useful for deferring functions until the call stack is clear and all current tasks have completed.

    
    console.log('Script start');

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

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

    console.log('Script end');
    

In the above example, ‘Script start’ and ‘Script end’ will execute first. The microtasks queued by queueMicrotask will be executed right after the current script execution completes.

Using multiple queueMicrotask calls

You can queue multiple microtasks and they will be executed in the order they were added.

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

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

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

This will result in ‘Microtask 1’, ‘Microtask 2’, and ‘Microtask 3’ being logged in order after all current tasks complete.

Comparison with setTimeout and Promises

While similar in purpose, microtasks queued with queueMicrotask are different from those scheduled by setTimeout and Promises.

    
    setTimeout(() => {
      console.log('setTimeout');
    }, 0);

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

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

    console.log('Script end');
    

In this example, ‘Script end’ will be logged first, followed by ‘Microtask’, then ‘Promise’, and finally ‘setTimeout’. This is because microtasks have a higher priority than tasks scheduled by timeout or promises.

Example: Building a Simple App

Let’s create a simple application to demonstrate the usage of queueMicrotask in a more practical scenario.

App: Todo List

We’ll build a simple Todo List application where tasks are displayed immediately but some processing is deferred using queueMicrotask.

    
    document.getElementById('addTask').addEventListener('click', () => {
      const taskText = document.getElementById('taskText').value;
      const taskItem = document.createElement('li');
      taskItem.innerText = taskText;
      document.getElementById('tasks').appendChild(taskItem);

      // defer some heavy processing
      queueMicrotask(() => {
        console.log('Processing task: ' + taskText);
        // simulating heavy computation
        for (let i = 0; i < 1000000; i++) {}
        console.log('Processing finished for task: ' + taskText);
      });

      document.getElementById('taskText').value = '';
    });
    

This will ensure that the task is added to the UI immediately, while the heavy processing is deferred until the main thread is free, thereby improving perceived performance.

---

Conclusion

Understanding and using the queueMicrotask API can greatly enhance your ability to manage JavaScript workloads and boost application performance. By deferring background tasks and utilizing microtasks appropriately, you can ensure a smoother and more responsive user experience.

Hash: 10677dddfa81735919a45296267b2617efd18994fba59a33d109fe4ad96bb7fe