Ποια είναι η διαφορά μεταξύ των ετικετών <script>, <script async> και <script defer>;

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

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

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

Πίνακας σύγκρισης:

Ιδιότητα	Ανάλυση HTML κατά τη φόρτωση του script	Εκτέλεση script	Διατήρηση σειράς εκτέλεσης
Χωρίς	Διακοπή	Άμεσα μετά τη φόρτωση	Ναι
async	Συνεχίζεται	Άμεσα μετά τη φόρτωση (μπορεί να διακόψει την ανάλυση)	Όχι
defer	Συνεχίζεται	Μετά την ολοκλήρωση της ανάλυσης HTML	Ναι

Παράδειγμα:

<!-- Κανονικό script - μπλοκάρει την ανάλυση -->
<script src="script1.js"></script>

<!-- Asynchronous script - δεν μπλοκάρει την ανάλυση, εκτελείται αμέσως μετά τη φόρτωση -->
<script src="script2.js" async></script>

<!-- Αναβαθμισμένο script - δεν μπλοκάρει την ανάλυση, εκτελείται μετά την ανάλυση HTML -->
<script src="script3.js" defer></script>
<script src="script4.js" defer></script> <!-- Θα εκτελεστεί μετά το script3.js -->