Building Your Learning Module...
Getting things ready for you!
Find videos you like?
Save to resource drawer for future reference!
JavaScript uses two task queues to manage async code: Microtasks (high priority) and Macrotasks (normal priority). Understanding the execution order is crucial for writing predictable async code!
Higher priority! Execute before next macrotask. Run after current script completes.
Normal priority. Execute one per event loop cycle. Browser can render between them.
See microtasks vs macrotasks execution order in real-time
<div style="max-width: 800px; margin: 0 auto; font-family: 'Segoe UI', sans-serif;">
<div style="background: linear-gradient(135deg, #06b6d4 0%, #3b82f6 50%, #6366f1 100%); padding: 40px; border-radius: 16px; text-align: center; box-shadow: 0 10px 30px rgba(6, 182, 212, 0.3);">
<h2 style="color: white; margin: 0 0 12px 0; font-size: 28px; font-weight: 700;">⚡ Event Loop Demo</h2>
<p style="color: rgba(255, 255, 255, 0.9); margin: 0 0 30px 0; font-size: 15px;">Watch the execution order unfold</p>
<button id="runBtn" style="padding: 16px 40px; background: white; color: #06b6d4; border: none; border-radius: 12px; cursor: pointer; font-weight: 700; font-size: 18px; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2); transition: all 0.3s;">
▶️ Run Execution
</button>
<div id="output" style="margin-top: 30px; padding: 24px; background: rgba(255, 255, 255, 0.95); border-radius: 12px; min-height: 200px; backdrop-filter: blur(10px); text-align: left;"></div>
</div>
</div>Loading preview...
All synchronous code in the current script runs first (top to bottom)
Process entire microtask queue: Promises, queueMicrotask, MutationObserver
Execute one task from macrotask queue: setTimeout, setInterval, I/O
Check microtasks → Run one macrotask → Check microtasks → Loop continues...
setTimeout(fn, 0)!console.log('1. Start');
setTimeout(() => {
console.log('4. Macrotask (setTimeout)');
}, 0);
Promise.resolve().then(() => {
console.log('3. Microtask (Promise)');
});
console.log('2. End');
// Output:
// 1. Start
// 2. End
// 3. Microtask (Promise)
// 4. Macrotask (setTimeout)
// ✅ Microtask runs BEFORE macrotask!console.log('1. Start');
setTimeout(() => {
console.log('6. Macrotask 1');
}, 0);
Promise.resolve()
.then(() => {
console.log('3. Microtask 1');
return Promise.resolve();
})
.then(() => {
console.log('4. Microtask 2');
});
queueMicrotask(() => {
console.log('5. queueMicrotask');
});
console.log('2. End');
// Output:
// 1. Start
// 2. End
// 3. Microtask 1
// 4. Microtask 2
// 5. queueMicrotask
// 6. Macrotask 1
// ✅ ALL microtasks complete before first macrotask!setTimeout(() => {
console.log('2. Macrotask 1');
Promise.resolve().then(() => {
console.log('3. Microtask inside macro');
});
}, 0);
setTimeout(() => {
console.log('5. Macrotask 2');
}, 0);
console.log('1. Sync');
Promise.resolve().then(() => {
console.log('4. Microtask');
});
// Output:
// 1. Sync
// 4. Microtask
// 2. Macrotask 1
// 3. Microtask inside macro
// 5. Macrotask 2
// ✅ After each macrotask, microtasks run again!Promise.then()Promise.catch()Promise.finally()queueMicrotask()async/awaitMutationObserversetTimeout()setInterval()setImmediate() (Node)I/O operationsUI renderingrequestAnimationFrameALL microtasks run before next macrotask
.then() executes as microtask
Even setTimeout(fn, 0) is macrotask
Micros → Macro → Micros → Macro...