Explication détaillée de l'utilisation de l'attribut defer et de l'attribut async en Javascript

Cet article vous apporte une explication détaillée de l'utilisation de l'attribut defer et de l'attribut async en Javascript. Il a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer.

Pourquoi devez-vous charger les fichiers js de manière asynchrone :

Sans asynchrone, le document bloquera le téléchargement d'autres ressources lors du chargement du code js, ce qui entraînera une page vierge.

(1) Lors de l'exécution du script js placé en haut, le navigateur doit passer du temps à télécharger le code du fichier de lien externe et à l'exécuter. Cela entraînera un retard évident et affichera une page blanche, ce qui entraînera un retard évident. l'utilisateur ne peut pas parcourir le contenu et ne peut pas interagir avec la page.

(2) Bien que IE8, Firefox3.5, Safari4 et Chrome2 autorisent tous le téléchargement parallèle de fichiers Javascript, le processus de téléchargement des scripts ne s'affectera pas, mais le chargement de la page doit encore attendre jusqu'à ce que tous les codes Javascript soient téléchargés et exécutés pour continuer. Pour cette raison, il est recommandé de placer la balise 3f1c4e4b6b16bbbd69b2ee476dc4f83a en bas du champ 6c04bd5ca3fcae76e30b72ad730ca86d.

(3) Étant donné que chaque balise 3f1c4e4b6b16bbbd69b2ee476dc4f83a bloquera le rendu de la page lors du téléchargement, il est recommandé de réduire l'utilisation des balises 3f1c4e4b6b16bbbd69b2ee476dc4f83a Cela est vrai non seulement pour les scripts de liens externes, mais également pour les scripts en ligne. Chaque fois que le navigateur rencontre une balise 3f1c4e4b6b16bbbd69b2ee476dc4f83a lors de l'analyse d'une page HTML, cela entraînera un certain retard dû à l'exécution du script. De plus, étant donné la surcharge de performances supplémentaire imposée par les requêtes HTTP, le téléchargement d'un seul fichier de 100 Ko sera plus rapide que le téléchargement de quatre fichiers de 25 Ko.

Utilisation de defer et async :

Mêmes points : defer et async sont tous deux utilisés pour charger des scripts de manière asynchrone. Grâce au téléchargement parallèle, il n'y aura aucun blocage pendant le processus de téléchargement.

Différences :

différer :

(1) peut être utilisé pour charger des scripts externes ou des scripts intégrés. Les scripts en ligne sont limités à IE9 et versions antérieures. Les navigateurs grand public sont basés sur la spécification HTML5 du W3C : defer ne prend effet que lorsque l'attribut src est déclaré.

Par exemple :

//外部脚本<script src="1.js" defer></script>//内嵌脚本<script defer>
    console.log("defer");</script>

(2) La balise 3f1c4e4b6b16bbbd69b2ee476dc4f83a avec l'attribut defer peut être placée n'importe où sur la page, et le fichier Javascript correspondant sera analysé en

async :

(1) uniquement pour les scripts externes.

(2) Exécuté immédiatement après la fin du chargement asynchrone.

Pièce jointe : pour plus de détails sur la prise en charge par le navigateur de l'attribut defer, veuillez consulter : https://caniuse.com/#feat=script-defer, recherchez simplement defer.

Pourquoi devez-vous charger les fichiers js de manière asynchrone :

Sans asynchrone, le document bloquera le téléchargement d'autres ressources lors du chargement du code js, ce qui entraînera une page vierge.

(1) Lors de l'exécution du script js placé en haut, le navigateur doit passer du temps à télécharger le code du fichier de lien externe et à l'exécuter. Cela entraînera un retard évident et affichera une page blanche, ce qui entraînera un retard évident. l'utilisateur ne peut pas parcourir le contenu et ne peut pas interagir avec la page.
(2) Bien que IE8, Firefox3.5, Safari4 et Chrome2 autorisent tous le téléchargement parallèle de fichiers Javascript et que le processus de téléchargement des scripts ne s'affectera pas, le chargement de la page doit toujours attendre que tout Javascript les codes sont téléchargés et exécutés avant de pouvoir continuer. Pour cette raison, il est recommandé de placer la balise 3f1c4e4b6b16bbbd69b2ee476dc4f83a en bas du champ 6c04bd5ca3fcae76e30b72ad730ca86d.
(3) Étant donné que chaque balise 3f1c4e4b6b16bbbd69b2ee476dc4f83a bloquera le rendu de la page lors du téléchargement, il est recommandé de réduire l'utilisation des balises 3f1c4e4b6b16bbbd69b2ee476dc4f83a Cela est vrai non seulement pour les scripts de liens externes, mais également pour les scripts en ligne. Chaque fois que le navigateur rencontre une balise 3f1c4e4b6b16bbbd69b2ee476dc4f83a lors de l'analyse d'une page HTML, cela entraînera un certain retard dû à l'exécution du script. De plus, étant donné la surcharge de performances supplémentaire imposée par les requêtes HTTP, le téléchargement d'un seul fichier de 100 Ko sera plus rapide que le téléchargement de quatre fichiers de 25 Ko.

Utilisation de defer et async :

Mêmes points : defer et async sont tous deux utilisés pour charger des scripts de manière asynchrone. Grâce au téléchargement parallèle, il n'y aura aucun blocage pendant le processus de téléchargement.

Différences :

différer :

(1) peut être utilisé pour charger des scripts externes ou des scripts intégrés. Les scripts en ligne sont limités à IE9 et versions antérieures. Les navigateurs grand public sont basés sur la spécification HTML5 du W3C : defer ne prend effet que lorsque l'attribut src est déclaré.

Par exemple :

//外部脚本<script src="1.js" defer></script>//内嵌脚本<script defer>
    console.log("defer");</script>

(2) La balise 3f1c4e4b6b16bbbd69b2ee476dc4f83a avec l'attribut defer peut être placée n'importe où sur la page, et le fichier Javascript correspondant sera analysé en

async :

(1) uniquement pour les scripts externes.

(2) Exécuté immédiatement après la fin du chargement asynchrone.

Pièce jointe : pour plus de détails sur la prise en charge par le navigateur de l'attribut defer, veuillez consulter : https://caniuse.com/#feat=script-defer, recherchez simplement defer.

Ce qui précède est une introduction détaillée à l'utilisation de l'attribut defer et de l'attribut async en Javascript. Si vous souhaitez en savoir plus sur le Tutoriel vidéo JavaScript, veuillez faire attention au site Web PHP chinois.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!