Чӣ гуна вазифаҳои макро ва микро ҳастанд?

Макрозадачалар — браузердің жоғары деңгейлі үлкен кезеңдері, мысалы, HTML талдауы, DOM құру, CSSOM құру, стильдерді есептеу, рендер ағашын құру, орналасу (Layout), бояу (Paint) және композиция (Composite). Олар негізгі рендерлік құбырды құрайды.

Микрозадақалар — бұл кішірек, егжей-тегжейлі әрекеттер, олар ағымдағы макрозада аяқталғаннан кейін және келесі басталмас бұрын орындалады. Оларға 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 қалай жұмыс істейтінін түсіну үшін маңызды.