Résumé de la façon dont JavaScript résout les méthodes d'implémentation de chargement asynchrone

Par défaut, javascript est chargé de manière synchrone, c'est-à-dire que javascript est bloqué lors du chargement. Les éléments suivants doivent attendre que javascript soit chargé avant de pouvoir être chargé à nouveau. Pour certains javascript, ce n'est pas très significatif, s'il est placé. en tête de page, cela provoquera un chargement lent, cela affectera sérieusement l'expérience utilisateur.

(1) defer, ne prend en charge qu'IE
Définition et utilisation de l'attribut defer
L'attribut defer spécifie s'il faut retarder l'exécution du script jusqu'à ce que la page soit chargée.
Certains scripts javascript utilisent la méthode document.write pour créer le contenu actuel du document, mais d'autres scripts ne le peuvent pas.

Si votre script ne modifie pas le contenu du document, vous pouvez ajouter l'attribut defer à la balise 3f1c4e4b6b16bbbd69b2ee476dc4f83a pour accélérer le traitement du document. Étant donné que le navigateur sait qu'il sera capable de lire en toute sécurité le reste du document sans exécuter le script, il différera l'interprétation du script jusqu'à ce que le document ait été affiché à l'utilisateur.
Exemple :

<script type="text/javascript" defer="defer"> 
alert(document.getElementById("p1").firstChild.nodeValue); 
</script>

(2) async :
Définition et usage de async (c'est un attribut de HTML5)
L'attribut async précise qu'une fois le script disponible, il sera exécuté de manière asynchrone.
Exemple :

<script type="text/javascript" src="demo_async.js" async="async"></script>

Remarque : L'attribut async s'applique uniquement aux scripts externes (uniquement lors de l'utilisation de l'attribut src).
Remarque : Il existe plusieurs façons d'exécuter des scripts externes :
• Si async="async" : le script est exécuté de manière asynchrone par rapport au reste de la page (le script sera exécuté pendant que la page continue d'être analysée )
•Si async n'est pas utilisé et defer="defer" : le script sera exécuté lorsque la page aura terminé l'analyse
•Si ni async ni defer ne sont utilisés : le script est lu et exécuté immédiatement avant que le navigateur ne continue pour analyser la page

(3) Créer un script, insérer dans le DOM, rappeler après le chargement, voir le code :

function loadScript(url, callback){ 
var script = document.createElement_x("script") 
script.type = "text/javascript"; 
if (script.readyState){ //IE 
script.onreadystatechange = function(){ 
if (script.readyState == "loaded" || 
script.readyState == "complete"){ 
script.onreadystatechange = null; 
callback(); 
} 
}; 
} else { //Others: Firefox, Safari, Chrome, and Opera 
script.onload = function(){ 
callback(); 
}; 
} 
script.src = url; 
document.body.appendChild(script); 
}

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!