Ի՞նչ են մակրո և միկրո առաջադրանքները։

Մակրազատումները մեծ, բարձր մակարդակի փուլեր են բրաուզերի աշխատանքի, ինչպիսիք են 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-ի աշխատանքը հասկանալու համար: