<script> Le placement des balises a un impact considérable sur les performances et la vitesse des pages Web. Il existe deux situations courantes :
1. Mettez le code JS dans la balise head
Lorsque le code JS est placé dans la tête, lorsque le navigateur analyse le document HTML, il doit d'abord arrêter et exécuter le code JS lorsqu'il rencontre le code JS, puis continuer à analyser le document HTML. Cela peut ralentir le chargement de la page et obliger l'utilisateur à attendre longtemps avant de voir le contenu de la page.
2. Mettez le code JS dans la balise body
Lorsque le code JS est placé au bas de la balise body, lorsque le navigateur analyse le document HTML, il n'a pas besoin d'exécuter le code JS immédiatement, mais continuera à analyser le document HTML jusqu'à ce que le code JS en bas soit analysé Il peut accélérer le chargement des pages et améliorer l'expérience utilisateur.
<script> Les balises ont également des attributs defer et async .
1.différer
defer L'attribut indique au navigateur de télécharger le fichier JS immédiatement, mais de retarder l'exécution du fichier JS jusqu'à ce que le document HTML ait été analysé. Plusieurs defer fichiers avec des attributs sont exécutés séquentiellement dans l'ordre dans lequel ils apparaissent dans le document.
<script src="path/to/your/script.js" defer></script>
2. asynchrone
async L'attribut indique au navigateur d'exécuter le fichier JS immédiatement après le téléchargement du fichier JS, sans attendre la fin de l'analyse de la page. Plusieurs async fichiers avec des attributs ne garantissent pas l'ordre d'exécution.
<script src="path/to/require.js" data-main="path/to/main.js"></script>
Il convient de noter que les balises use defer et async attribute <script> ne peuvent être utilisées que dans les fichiers de script externes (c'est-à-dire src le fichier pointé par l'attribut) et ne peuvent pas être utilisées dans le code de script intégré.