Γιατί συνήθως συνδέονται τα scripts στο τέλος της ετικέτας body;
sobes.tech AI
Απάντηση από AI
Για την αποφυγή μπλοκαρίσματος της απόδοσης της σελίδας και την εξασφάλιση άμεσης πρόσβασης στα στοιχεία DOM μετά τη φόρτωση.
Όταν συνδέετε σενάρια στο <head> ή στην αρχή του <body> χωρίς τα χαρακτηριστικά async ή defer, ο περιηγητής διακόπτει την ανάλυση HTML και την απόδοση της σελίδας μέχρι το σενάριο να φορτωθεί και να εκτελεστεί. Αυτό επιβραδύνει την ορατή απόδοση του ιστότοπου.
Η σύνδεση στο τέλος του <body> διασφαλίζει ότι το δέντρο DOM έχει ήδη ολοκληρωθεί κατά τη στιγμή εκτέλεσης του σεναρίου, επιτρέποντας άμεση αλληλεπίδραση με τα στοιχεία χωρίς να χρειάζεται να χρησιμοποιήσετε χειριστές γεγονότων όπως το DOMContentLoaded ή το load μόνο για πρόσβαση στα στοιχεία.
Τα χαρακτηριστικά async και defer είναι σύγχρονες εναλλακτικές που προσφέρουν πιο ευέλικτες επιλογές φόρτωσης σεναρίων, χωρίς να μπλοκάρουν την ανάλυση HTML:
async: Το σενάριο φορτώνεται ασύγχρονα και εκτελείται αμέσως μετά τη φόρτωση, χωρίς να περιμένει την πλήρη φόρτωση του DOM. Η σειρά εκτέλεσης των ασύγχρονων σεναρίων δεν εγγυάται.defer: Το σενάριο φορτώνεται ασύγχρονα και εκτελείται μετά την πλήρη ανάλυση του HTML, αλλά πριν από το γεγονόςDOMContentLoaded. Τα σενάρια μεdeferεκτελούνται με τη σειρά εμφάνισής τους στο έγγραφο.