Microtask vs Macrotask in JavaScript: Key Differences and Usage

In JavaScript, macrotasks are tasks like setTimeout or setInterval callbacks that run after the current script and microtasks. Microtasks include promises and process.nextTick callbacks, running immediately after the current operation but before macrotasks, ensuring higher priority execution.

Quick Comparison

This table summarizes the main differences between microtasks and macrotasks in JavaScript.

Aspect	Microtask	Macrotask
Definition	Small tasks queued to run immediately after current code	Larger tasks queued to run after microtasks and current code
Examples	Promise callbacks, MutationObserver, process.nextTick (Node.js)	setTimeout, setInterval, I/O events, UI rendering
Execution Timing	Runs right after current script and before macrotasks	Runs after microtasks and current script complete
Queue Type	Microtask queue	Macrotask (task) queue
Impact on UI	Can delay UI updates if many microtasks run	UI updates happen between macrotasks
Priority	Higher priority, runs first	Lower priority, runs later

Key Differences

Microtasks and macrotasks are two types of tasks managed by the JavaScript event loop to handle asynchronous operations. The event loop processes all microtasks before moving on to macrotasks, which means microtasks have higher priority and run sooner.

Microtasks include promise callbacks and other small jobs that need to happen immediately after the current code finishes but before the browser or Node.js handles other events. Macrotasks include timers like setTimeout, UI events, and network requests, which are scheduled to run later to avoid blocking the main thread.

This difference affects how asynchronous code executes and how responsive your app feels. For example, if many microtasks are queued, they can delay macrotasks and UI updates, potentially causing jank or delays in rendering.

Code Comparison

This example shows how a macrotask runs after the current script and microtasks.

javascript

console.log('Script start');

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

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

console.log('Script end');

Output

Script start
Script end
Microtask: Promise
Macrotask: setTimeout

Microtask Equivalent

This code shows how microtasks run immediately after the current script, before macrotasks.

javascript

console.log('Start');

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

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

console.log('End');

Output

Start
End
Microtask runs
Macrotask runs

When to Use Which

Choose microtasks when you want to run code immediately after the current operation, such as updating state after a promise resolves or running small jobs that must happen before UI updates.

Choose macrotasks for delayed or scheduled tasks like timers, animations, or handling user input events where running after microtasks and UI updates is acceptable.

Using microtasks for heavy or long-running operations can block UI updates, so use macrotasks to keep your app responsive.

Key Takeaways

Microtasks run immediately after current code and before macrotasks, giving them higher priority.

Macrotasks include timers and UI events and run after microtasks complete.

Use microtasks for quick, immediate async jobs like promise callbacks.

Use macrotasks for delayed or scheduled tasks to avoid blocking UI.

Understanding their order helps write efficient, responsive JavaScript code.