Ποια είναι η διαφορά στη λειτουργία των modes (async, defer ή type) της ετικέτας <script>;

<script> χωρίς χαρακτηριστικά

• Το HTML αναλύεται μέχρι τη ετικέτα <script>.
• Η ανάλυση HTML διακόπτεται κατά την ανίχνευση της ετικέτας <script>.
• Το script φορτώνεται.
• Το script εκτελείται.
• Η ανάλυση HTML συνεχίζεται μετά την εκτέλεση του script.

<script async>

• Το HTML αναλύεται ταυτόχρονα με το φόρτωμα του script.
• Η ανάλυση HTML διακόπτεται όταν ολοκληρωθεί το φόρτωμα του script.
• Το script εκτελείται.
• Η ανάλυση HTML συνεχίζεται μετά την εκτέλεση του script.
• Η σειρά εκτέλεσης των scripts με async δεν είναι εγγυημένη, εξαρτάται από την ταχύτητα φόρτωσης.

<script defer>

• Το HTML αναλύεται ταυτόχρονα με το φόρτωμα του script.
• Το script εκτελείται μετά την ολοκλήρωση της ανάλυσης HTML, αλλά πριν το γεγονός DOMContentLoaded.
• Η σειρά εκτέλεσης των scripts με defer είναι εγγυημένη, αντιστοιχεί στη σειρά εμφάνισης στο HTML.
• Η συμπεριφορά είναι παρόμοια με το <script> που τοποθετείται πριν το κλείσιμο της ετικέτας </body>.

<script type="module"> (για ECMAScript Modules)

• Χειρίζεται ως <script defer> από προεπιλογή (αναβολή εκτέλεσης μετά την ανάλυση, διατήρηση σειράς).
• Μπορεί να χρησιμοποιηθεί με το χαρακτηριστικό async.
• Υποστηρίζει εισαγωγή/εξαγωγή modules. Δημιουργεί ξεχωριστό scope.

Χαρακτηριστικό	Φόρτωση script	Εκτέλεση script	Αποκλεισμός ανάλυσης HTML	Σειρά εκτέλεσης
Κανένα	Μπλοκάρισμα	Μπλοκάρισμα	Ναι	Διατηρείται
async	Μη μπλοκαριστικό (παράλληλο)	Μη μπλοκαριστικό (μετά το φόρτωμα)	Όχι	Δεν εγγυάται
defer	Μη μπλοκαριστικό (παράλληλο)	Μη μπλοκαριστικό (μετά την ανάλυση HTML)	Όχι	Διατηρείται
type="module"	Μη μπλοκαριστικό (παράλληλο)	Μη μπλοκαριστικό (μετά την ανάλυση HTML, προεπιλογή)	Όχι	Διατηρείται (προεπιλογή)

// Παράδειγμα απλού script
console.log('Κανονικό script');

// Παράδειγμα ασύγχρονου script
console.log('Ασύγχρονο script');

// Παράδειγμα αναβολής script
console.log('Αναβληθέν script');

// Παράδειγμα module
import { someFunction } from './module.js';
someFunction();
console.log('Script module');