Q40. What is the difference between microtasks and macrotasks?

JavaScript-এর event loop-এ কাজের দুটি সারি আছে — macrotask আর microtask। main code শেষ হওয়ার পর সবসময় আগে সম্পূর্ণ microtask queue শূন্য হওয়া পর্যন্ত চালানো হয়, তারপর একটি macrotask চালানো হয়।

console.log("1: মূল কোড");

setTimeout(() => {
  console.log("5: setTimeout (macrotask)");
}, 0);

Promise.resolve().then(() => {
  console.log("3: Promise.then (microtask)");
});

queueMicrotask(() => {
  console.log("4: queueMicrotask (microtask)");
});

console.log("2: মূল কোড শেষ");

ধাপে ধাপে — প্রথমে main code চলে, তাই 1 তারপর 2 ছাপা হয়। এরপর microtask queue খালি করতে 3 এবং 4 চলে। সবশেষে একটি macrotask নিয়ে 5 চলে। তাই macro ও micro-এর সংখ্যা ছোট হলেও সবসময় আগে microtask চলে।

macrotask কোথা থেকে আসে — setTimeout, setInterval, fetch-এর network callback, I/O, DOM event, requestAnimationFrame। microtask কোথা থেকে আসে — Promise.then, catch, finally, queueMicrotask, এবং async/await-এর ভেতরের await অংশ।

// microtask সবসময় আগে শেষ হয়
setTimeout(() => console.log("A: macrotask"), 0);

for (let i = 1; i <= 3; i++) {
  Promise.resolve().then(() => console.log("B" + i + ": microtask"));
}

console.log("C: main");

// output: C -> B1 -> B2 -> B3 -> A

দেখা যায় তিনটি microtaskই একসাথে queue-তে ঢুকে যায় এবং একটি macrotask চালানোর আগেই সব চলে। এটাই macrotask-এর প্রধান বৈশিষ্ট্য — একটি macrotask চলতে শুরু করলে তার ভেতর থেকে আসা microtask সবচেয়ে আগে চলে।

// একটি macrotask চলতে শুরু করলে তার নিজের microtask আগে চলে
setTimeout(() => {
  console.log("1: macrotask শুরু");

  Promise.resolve().then(() => {
    console.log("2: macrotask ভেতরের microtask");
  });

  console.log("3: macrotask শেষ");
}, 0);

console.log("0: main");

// output: 0 -> 1 -> 3 -> 2

browser-এ rendering-এর সময়ও এই ক্রম থাকে — একটি macrotask ও তার সব microtask শেষ হওয়ার পরেই সাধারণত screen repaint হয়, তাই বারবার requestAnimationFrame না ডেকে বারবার DOM বদলালে চোখে ধরা পড়ে না।