Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
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.
Microtask Queue
A Microtask queue is a queue of tasks that are executed after the current task. The microtask queue is handled by the JavaScript engine before it moves on to the next task in the callback queue.
Example
Here’s an example of how microtask queue works −
<!doctype html>
<html>
<head>
<title>Examples</title>
</head>
<body>
<div id="result"></div>
<script>
console.log('start');
setTimeout(function() {
console.log('setTimeout');
}, 0);
Promise.resolve().then(function() {
console.log('promise resolve');
});
console.log('end');
</script>
</body>
</html>In the example above, the ‘setTimeout’ callback is added to the callback queue. The ‘Promise.resolve’ is added to the microtask queue. The JavaScript engine will first execute all tasks in the microtask queue before moving on to the callback queue.
Therefore, the output of the code above would be (in the console) −
start end promise resolve setTimeout
Callback Queue
A callback queue is a queue of tasks that are executed after the current task. The callback queue is handled by the JavaScript engine after it has executed all tasks in the microtask queue.
Example
Here’s an example of how callback queue works −
<!doctype html>
<html>
<head>
<title>Examples</title>
</head>
<body>
<div id="result"></div>
<script>
console.log('start');
setTimeout(function() {
console.log('setTimeout');
}, 0);
console.log('end');
</script>
</body>
</html>In the example above, the ‘setTimeout’ callback is added to the callback queue. The JavaScript engine will execute the ‘setTimeout’ callback after it has finished executing all the code in the current task.
Therefore, the output of the code above would be (in the console) −
start end setTimeout
Difference between Microtask Queue and Callback Queue
Some points of difference between a microtask queue and a callback queue are −
Microtask queue is handled by the JavaScript engine before it moves on to the next task in the callback queue. The Callback queue is handled by the JavaScript engine after it has executed all tasks in the microtask queue.
Microtask queue is processed after the current task is finished. The Callback queue is processed after the microtask queue is empty.
Microtask queue is processed in a separate event loop. The Callback queue is processed in the same event loop.
Advantages of Microtask queue
Some of the advantages of a microtask queue over a callback queue are −
Microtask queue is processed in a separate event loop which means that if the main thread is blocked, the microtask queue will still be processed.
Microtask queue is processed after the current task is finished which means that any code that is dependent on the current task can be added to the microtask queue and it will be executed as soon as the current task is finished.
Microtask queue has a higher priority than the callback queue which means that if both queues are scheduled to be executed at the same time, the microtask queue will be executed first.
Advantage of Callback queue
One of the advantages of a callback queue over a microtask queue is that the callback queue is processed in the same event loop as the main thread. This means that if the main thread is blocked, the callback queue will not be processed.
Conclusion
In this tutorial, we have looked at the difference between the microtask queue and callback queue in asynchronous JavaScript. We have also looked at the advantages of each queue.
3K+ Views
