Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
What is difference between Microtask Queue and Callback Queue in asynchronous JavaScript?
In asynchronous JavaScript, there are two ways to schedule tasks - microtask queue and callback queue. Both queues are handled differently by the JavaScript engine, with microtasks having higher priority than callbacks.
Event Loop Overview
The event loop processes tasks in this order: call stack ? microtask queue ? callback queue. Understanding this priority system is crucial for predicting execution order in asynchronous code.
Microtask Queue
A microtask queue contains tasks that execute immediately after the current synchronous code completes, but before any callback queue tasks. Promises and queueMicrotask() use this queue.
Example
<!doctype html>
<html>
<head>
<title>Microtask Queue Example</title>
</head>
<body>
<script>
console.log('start');
setTimeout(function() {
console.log('setTimeout');
}, 0);
Promise.resolve().then(function() {
console.log('promise resolve');
});
console.log('end');
</script>
</body>
</html>
The JavaScript engine executes synchronous code first, then processes all microtasks before moving to callback tasks.
start end promise resolve setTimeout
Callback Queue
A callback queue (also called task queue) contains tasks from setTimeout, setInterval, and DOM events. These execute only after all microtasks are processed.
Example
<!doctype html>
<html>
<head>
<title>Callback Queue Example</title>
</head>
<body>
<script>
console.log('start');
setTimeout(function() {
console.log('setTimeout 1');
}, 0);
setTimeout(function() {
console.log('setTimeout 2');
}, 0);
console.log('end');
</script>
</body>
</html>
start end setTimeout 1 setTimeout 2
Comparison
| Feature | Microtask Queue | Callback Queue |
|---|---|---|
| Priority | Higher (executes first) | Lower (executes after microtasks) |
| Sources | Promises, queueMicrotask() | setTimeout, setInterval, DOM events |
| Processing | All tasks processed at once | One task per event loop cycle |
| Use Case | State updates, cleanup | User interactions, timers |
Complete Example: Both Queues
<!doctype html>
<html>
<head>
<title>Microtask vs Callback Queue</title>
</head>
<body>
<script>
console.log('1: synchronous');
setTimeout(() => console.log('2: setTimeout (callback)'), 0);
Promise.resolve()
.then(() => console.log('3: promise 1 (microtask)'))
.then(() => console.log('4: promise 2 (microtask)'));
queueMicrotask(() => console.log('5: queueMicrotask'));
console.log('6: synchronous');
</script>
</body>
</html>
1: synchronous 6: synchronous 3: promise 1 (microtask) 4: promise 2 (microtask) 5: queueMicrotask 2: setTimeout (callback)
Key Points
Microtasks always execute before callback tasks, regardless of timing
All microtasks are processed before any callback task runs
Callback queue processes one task per event loop cycle
Promises create microtasks, setTimeout creates callback tasks
Conclusion
Microtasks have higher priority than callbacks in JavaScript's event loop. Understanding this queue system helps predict execution order in asynchronous code, making debugging and optimization more effective.
3K+ Views
