Τι είναι οι μακρο- και μικρο-εργασίες;

Οι macro-εργασίες είναι μεγάλα, υψηλού επιπέδου στάδια της εργασίας του περιηγητή, όπως η ανάλυση HTML, η κατασκευή DOM, η κατασκευή CSSOM, ο υπολογισμός στυλ, η κατασκευή του δέντρου απόδοσης, το layout, η ζωγραφική (Paint) και η σύνθεση (Composite). Δημιουργούν τον κύριο αγωγό απόδοσης.

Οι micro-εργασίες είναι μικρότερες, πιο λεπτομερείς ενέργειες που εκτελούνται μετά την ολοκλήρωση της τρέχουσας macro-εργασίας και πριν από την έναρξη της επόμενης. Περιλαμβάνουν τη διαχείριση υποσχέσεων (Promise), MutationObserver, queueMicrotask.

Το βασικό διαφορά είναι ότι οι micro-εργασίες εκτελούνται πάντα αμέσως μετά την τρέχουσα macro-εργασία, ενώ η επόμενη macro-εργασία (π.χ. το επόμενο πλαίσιο απόδοσης ή η διαχείριση γεγονότος χρονόμετρου setTimeout) εκτελείται μόνο αφού η ουρά micro-εργασιών είναι άδεια.

Παράδειγμα σειράς εκτέλεσης:

// Macro-εργασία (αρχικός κώδικας)
console.log('Αρχή');

// Macro-εργασία (χρονοδιακόπτης)
setTimeout(() => {
  console.log('Χρονόμετρο');
}, 0);

// Micro-εργασία (υπόσχεση)
Promise.resolve().then(() => {
  console.log('Υπόσχεση');
});

// Macro-εργασία (τέλος αρχικού κώδικα)
console.log('Τέλος');

Έξοδος στην κονσόλα:

Αρχή
Τέλος
Υπόσχεση
Χρονόμετρο

Σειρά εκτέλεσης:

1. Εκτελείται η αρχική macro-εργασία (κύριο σενάριο).
2. console.log('Αρχή').
3. setTimeout τοποθετεί τη macro-εργασία στην ουρά.
4. Promise.resolve().then() τοποθετεί τη micro-εργασία στην ουρά.
5. console.log('Τέλος').
6. Η κύρια macro-εργασία ολοκληρώνεται.
7. Ελέγχεται η ουρά micro-εργασιών: εκτελείται το Promise.resolve().then().
8. console.log('Υπόσχεση').
9. Η ουρά micro-εργασιών είναι άδεια.
10. Ο περιηγητής επεξεργάζεται τις εργασίες στον βρόχο γεγονότων, μεταβαίνει στην επόμενη macro-εργασία.
11. Η macro-εργασία από το setTimeout επεξεργάζεται.
12. console.log('Χρονόμετρο').
13. Η macro-εργασία ολοκληρώνεται.

Αυτή η κατανόηση είναι σημαντική για τη διαχείριση της σειράς εκτέλεσης ασύγχρονων λειτουργιών και την κατανόηση του πώς λειτουργεί το Event Loop.