Микро жана макро тапшырмалар эмнелер?

Макрозадачалар — браузердин ишинин жогорку деңгээлдеги чоң этаптары, мисалы HTML парсинг, DOM түзүү, CSSOM түзүү, стилдерди эсептөө, рендеринг дарагын түзүү, Layout, Paint жана Composition. Алар негизги рендеринг конвейерин түзөт.

Микрозадачалар — бул кичинекей, деталдуу иш-аракеттер, алар учурдагы макрозадача аяктагандан кийин жана кийинки башталгандан кийин аткарылат. Аларга промис иштетүү (Promise), MutationObserver, queueMicrotask кирет.

Негизги айырмачылык — микрозадачалар дайыма жөн эле учурдагы макрозадачадан кийин аткарылат, ал эми кийинки макрозадача (мисалы, кийинки рендеринг кадры же таймер иштетүү setTimeout) микрозадачалар кезеги бош болгон соң гана аткарылат.

Ишке ашуу тартиби мисалы:

// Макрозадача (баштапкы код)
console.log('Баштоо');

// Макрозадача (таймер)
setTimeout(() => {
  console.log('Таймер');
}, 0);

// Микрозадача (промис)
Promise.resolve().then(() => {
  console.log('Промис');
});

// Макрозадача (баштапкы коддун аягы)
console.log('Аягы');

Консоль чыгышы:

Баштоо
Аягы
Промис
Таймер

Ишке ашуу тартиби:

1. Баштапкы макрозадача (негизги скрипт) аткарылат.
2. console.log('Баштоо').
3. setTimeout макрозадачаны кезекке коёт.
4. Promise.resolve().then() микрозадачаны кезекке коёт.
5. console.log('Аягы').
6. Негизги макрозадача аяктады.
7. Микрозадачалар кезеги текшерилет жана Promise.resolve().then() аткарылат.
8. console.log('Промис').
9. Микрозадачалар кезеги бош.
10. Браузер иш циклинде иштеп, кийинки макрозадачаны иштетет.
11. setTimeout макрозадачасы иштетилет.
12. console.log('Таймер').
13. Макрозадача аяктады.

Бул түшүнүк асинхрондук операцияларды башкарууда жана Event Loop ишин түшүнүүдө маанилүү.