Pourquoi les scripts sont-ils généralement placés à la fin de la balise body?
sobes.tech IA
Réponse de l'IA
Pour éviter le blocage du rendu de la page et assurer l'accès aux éléments DOM immédiatement après leur chargement.
Lors de l'inclusion de scripts dans <head> ou au début de <body> sans attributs async ou defer, le navigateur suspend l'analyse du HTML et le rendu de la page jusqu'à ce que le script soit chargé et exécuté. Cela ralentit la performance visible du site.
L'inclusion à la fin de <body> garantit que l'arbre DOM est déjà complètement formé au moment de l'exécution du script, permettant une interaction directe avec les éléments sans avoir besoin d'utiliser des gestionnaires d'événements comme DOMContentLoaded ou load uniquement pour accéder aux éléments.
Les attributs async et defer sont des alternatives modernes qui offrent des options plus flexibles pour charger les scripts sans bloquer l'analyse du HTML:
async: Le script est chargé de manière asynchrone et s'exécute immédiatement après le chargement, sans attendre que le DOM soit complètement chargé. L'ordre d'exécution des scripts asynchrones n'est pas garanti.defer: Le script est chargé de manière asynchrone et s'exécute après l'analyse complète du HTML, mais avant l'événementDOMContentLoaded. Les scripts avecdefers'exécutent dans l'ordre de leur apparition dans le document.