Makro ve mikro görevler nelerdir?

Makro görevler, HTML ayrıştırma, DOM oluşturma, CSSOM oluşturma, stillerin hesaplanması, render ağacı oluşturma, düzen (Layout), boyama (Paint) ve bileşim (Composite) gibi tarayıcı işlemlerinin büyük, yüksek seviyeli aşamalarıdır. Bunlar ana render hattını oluştururlar.

Micro görevler, mevcut makro görevin tamamlanmasından sonra ve bir sonraki görevin başlamasından önce gerçekleştirilen daha küçük, detaylı işlemlerdir. Bunlara Promise, MutationObserver, queueMicrotask gibi işlemler dahildir.

Ana fark, micro görevlerin her zaman hemen mevcut makro görevden sonra yürütülmesi, bir sonraki makro görevin (örneğin, bir sonraki render çerçevesi veya setTimeout zamanlayıcı olayı) ise, micro görevler kuyruğu boş olduktan sonra yürütülmesidir.

Yürütme sırasına örnek:

// Makro görev (başlangıç kodu)
console.log('Başlangıç');

// Makro görev (zamanlayıcı)
setTimeout(() => {
  console.log('Zamanlayıcı');
}, 0);

// Micro görev (promis)
Promise.resolve().then(() => {
  console.log('Promis');
});

// Makro görev (bitiş)
console.log('Bitiş');

Konsolda çıktı:

Başlangıç
Bitiş
Promis
Zamanlayıcı

Yürütme sırası:

1. Başlangıç makro görevi (ana script) çalıştırılır.
2. console.log('Başlangıç').
3. setTimeout makro görevi kuyruğa ekler.
4. Promise.resolve().then() mikro görevi kuyruğa ekler.
5. console.log('Bitiş').
6. Ana makro görev biter.
7. Mikro görevler kuyruğu kontrol edilir: Promise.resolve().then() çalıştırılır.
8. console.log('Promis').
9. Mikro görevler kuyruğu boş.
10. Tarayıcı olay döngüsünde görevleri işler, bir sonraki makro göreve geçer.
11. setTimeout makro görevi işlenir.
12. console.log('Zamanlayıcı').
13. Makro görev biter.

Bu anlayış, asenkron işlemlerin yürütülme sırasını yönetmek ve Event Loop'un nasıl çalıştığını anlamak için önemlidir.