Comment exécuter des balises de script JS avec des attributs différés et asynchrones

<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é.

Guess you like

Origin blog.csdn.net/cuiyuchen111/article/details/131094161