Utiliser l'attribut defer pour charger les scripts JavaScript dans le head

Question

J'ai vu que l'on pouvait insérer le script dans le head en ajoutant l'attribut defer : Ce serait même une bonne pratique pour charger le script en arrière-plan (en parallèle).

Louis-Nicolas Leuillet · Accepted Answer

Yes, tu as raison 🙂
Effectivement, ajouter defer à un script placé dans le head c'est une très bonne pratique. Le navigateur télécharge le fichier JavaScript en parallèle du HTML, sans bloquer l’affichage de la page, puis il l’exécute uniquement une fois que tout le DOM est chargé. Du coup, tu peux manipuler le DOM sans te poser de questions et sans wrapper ton code dans un DOMContentLoaded .
J'ajoute simplement qu'il faut surtout pas le confondre avec async . Avec async , le script est aussi chargé en parallèle, mais il s’exécute dès qu’il est prêt, même si le HTML n’est pas encore entièrement parsé. L’ordre d’exécution n’est pas garanti et ça peut poser problème si ton script dépend du DOM ou d’un autre script.

Utiliser l'attribut defer pour charger les scripts JavaScript dans le head

Formation JavaScript (legacy)