რა არის მიკრო და მიკრო დავალებები?

მიკროზადანებები — ეს არის ბრაუზერის სამუშაოს მაღალი დონის დიდი ეტაპები, როგორიცაა HTML-ის ანალიზი, DOM-ის შექმნა, CSSOM-ის შექმნა, სტილების გამოთვლა, რენდერინგის ხე-ის შექმნა, Layout, Paint და Composition. ისინი ქმნიან ძირითად რენდერინგის კონვეიერს.

მიკროზადანებები — ეს არის უფრო პატარა, დეტალიზებული მოქმედებები, რომლებიც შესრულდება მიმდინარე მიკროზადანების დასრულების შემდეგ და შემდეგი დაწყების წინ. მათში შედის პრომისების დამუშავება (Promise), MutationObserver, queueMicrotask.

ძირითადი განსხვავება ის არის, რომ მიკროზადანებები ყოველთვის შესრულდება მხოლოდ მიმდინარე მიკროზადანების შემდეგ, ხოლო შემდეგი მიკროზადანება (მაგალითად, შემდეგი რენდერინგის ფრეიმი ან setTimeout-ის მოვლენის დამუშავება) შესრულდება მხოლოდ მაშინ, როდესაც მიკროზადანების რიგი იქნება ცარიელი.

შესრულების წესია მაგალითით:

// მიკროზადანება (საწყისი კოდი)
console.log('დაწყება');

// მიკროზადანება (ტაიმერი)
setTimeout(() => {
  console.log('ტაიმერი');
}, 0);

// მიკროზადანება (პრომისი)
Promise.resolve().then(() => {
  console.log('პრომისი');
});

// მიკროზადანება (საწყისი კოდის დასასრული)
console.log('დასასრული');

კონსოლში გამოსავალი:

დაწყება
დასასრული
პრომისი
ტაიმერი

შესრულების წესია:

იწყება მთავარი მიკროზადანება (ძირითადი სკრიპტი).
console.log('დაწყება').
setTimeout სვამს მიკროზადანების რიგში.
Promise.resolve().then() სვამს მიკროზადანების რიგში.
console.log('დასასრული').
მთავარი მიკროზადანება დასრულდა.
მიკროზადანების რიგი შემოწმდება და შესრულდება Promise.resolve().then().
console.log('პრომისი').
მიკროზადანების რიგი ცარიელია.
ბრაუზერი აგრძელებს მოვლენების ციკლს და გადადის შემდეგი მიკროზადანების რიგზე.
setTimeout მიკროზადანება შესრულდება.
console.log('ტაიმერი').
მიკროზადანება დასრულდა.

ეს გაგება მნიშვნელოვანია ასინქრონული ოპერაციების წესრიგის მართვის და Event Loop-ის მუშაობის გასაგებად.