← Back tothis vs that

Microtasks vs macrotasks

Written byPhuoc Nguyen
08 Sep, 2023
JavaScript is a single-threaded language, which means that it can only do one thing at a time. But, it can handle multiple tasks by using a queue of tasks that are waiting to be executed. These tasks are divided into two categories: microtasks and macrotasks.


Macrotasks, also known as tasks or jobs, are tasks that take longer to complete and are added to the end of a queue. Examples of macrotasks include:
  • `setTimeout` and `setInterval` callbacks
  • DOM manipulation
  • I/O operations (like reading or writing to a file)
  • `requestAnimationFrame`
When a macrotask is added to the queue, it won't execute until all previously added tasks have been processed. This means that if a macrotask takes a long time to complete, it can prevent other tasks from executing.


Microtasks are small tasks that take less time to complete and are given priority in the task queue. Examples of microtasks include:
  • `Promises` callbacks (resolve and reject)
  • `MutationObserver` callbacks
  • `process.nextTick` in Node.js
When a microtask is added to the queue, it takes precedence over any macrotasks waiting in the queue. This means that if there are a large number of microtasks waiting, they will be executed before any macrotasks, regardless of when they were added to the queue.

Priority of microtasks over macrotasks

The priority of microtasks over macrotasks is important to understand when working with JavaScript. This is because if there are a lot of microtasks waiting in the queue, they can hold up the execution of macrotasks, which can lead to slow performance or even a frozen UI.
In general, it is a good practice to use microtasks whenever possible, especially when dealing with asynchronous operations. This can help ensure that your application remains responsive and performs well.


In summary, microtasks and macrotasks are two types of tasks that are used to manage the execution of JavaScript code. Macrotasks are larger, longer-running tasks that are added to the end of the queue, while microtasks are smaller, faster-running tasks that are added to the front of the queue. It is important to understand the priority of microtasks over macrotasks and to use microtasks whenever possible to ensure that your application remains responsive and performs well.

See also

Questions? 🙋

Do you have any questions? Not just about this specific post, but about any topic in front-end development that you'd like to learn more about? If so, feel free to send me a message on Twitter or send me an email. You can find them at the bottom of this page.
I have a long list of upcoming posts, but your questions or ideas for the next one will be my top priority. Let's learn together! Sharing knowledge is the best way to grow 🥷.

Recent posts ⚡

Newsletter 🔔

If you're into front-end technologies and you want to see more of the content I'm creating, then you might want to consider subscribing to my newsletter.
By subscribing, you'll be the first to know about new articles, products, and exclusive promotions.
Don't worry, I won't spam you. And if you ever change your mind, you can unsubscribe at any time.
Phước Nguyễn