Explication détaillée des attributs de script dans la synchronisation HTML5 et js et le code d'implémentation du chargement asynchrone

Attribut de script en HTML5 :
En plus des attributs définis par le nouveau standard HTML5, la balise
script en HTML5 a supprimé l'attribut de langue par rapport à HTML4.01 et a modifié l'attribut de type pour qu'il soit facultatif (texte par défaut /javascript), et un nouvel attribut async est ajouté.
async : booléen, le rôle de l'attribut, définit si le script est exécuté de manière asynchrone, la valeur est vraie ou fausse.
Si async est défini sur true, l'attribut defer sera ignoré.
Les fichiers js exécutés de manière asynchrone sont supposés ne pas utiliser document.write() pour écrire du contenu dans le document de chargement, donc n'utilisez pas document.write() pendant le chargement et l'exécution de fichiers js exécutés de manière asynchrone
Sauf en plus à l'attribut script tag, la façon dont la page introduit le fichier js affecte son mode de chargement et d'exécution :
Tout fichier js introduit en ajoutant un nœud de script (tel que appendChild(scriptNode)) est exécuté de manière asynchrone (scriptNode doit être inséré dans le document. Le simple fait de créer le nœud et de définir src ne chargera pas le fichier js, ce qui n'est pas analogue au préchargement de img)
Le code dans la balise 3f1c4e4b6b16bbbd69b2ee476dc4f83a Le fichier référencé par src est chargé de manière synchrone Et le code dans la balise 3f1c4e4b6b16bbbd69b2ee476dc4f83a dans le fichier
html est exécuté de manière asynchrone. Le fichier js introduit à l'aide de document.write() est exécuté de manière asynchrone.
Le fichier html est référencé par l'attribut src. Le fichier js introduit à l'aide de la méthode document.write() dans le code du fichier js est exécuté de manière synchrone
Utilisez l'objet Image pour précharger de manière asynchrone le fichier js (ne sera pas être exécuté)

N'utilisez pas quelque chose comme ce qui suit. Cette méthode ne lancera pas de requête pour charger le fichier js :
pNode.innerHTML = '9318febed1adb7e0ea1d696c0cf7b4fb< ;/script>';

L'événement window.onload sera exécuté dans js Déclenché uniquement après le chargement du fichier (même s'il est chargé de manière asynchrone)

1、 
<script> 
//同步加载执行的代码 
</script> 
2、 
<script src="xx.js"></script> //同步加载执行xx.js中的代码 
3、 
<script> 
document.write(&#39;<script src="xx.js"><\/script>&#39;); //异步加载执行xx.js中的代码 
</script> 
4、 
<script src="xx.js"></script>

Il y a le code suivant dans xx. js :

document.write(&#39;<script src="11.js"><\/script>&#39;); 
document.write(&#39;<script src="22.js"><\/script>&#39;);

Ensuite, xx.js et 11.js, 22 .js sont tous chargés et exécutés de manière synchrone.
Si xx.js, 11.js et 22.js sont chargés de manière asynchrone en insérant des nœuds de script, alors 11.js et 22.js sont chargés de manière asynchrone,
Si xx.js est chargé de manière asynchrone en insérant des nœuds de script, 11.js et 22.js sont chargés en mode document.write(script), puis 11.js et 22.js sont chargés de manière synchrone (testé par le dernier navigateur, sous chrome, l'exécution du chargement asynchrone de xx.j n'est plus disponible document.write() écrit le contenu dans le document, mais Firefox et IE peuvent écrire avant la fermeture du document (la méthode consiste à utiliser alert en html pour empêcher la fermeture du document))
Test : alert() en 11 .js (N'utilisez pas de boucle for, le navigateur est exécuté dans un seul thread et continuer à exécuter n'importe quel morceau de code entraînera le blocage du reste du code), console.log() dans 22.js, vous peut voir que le code dans 22.js est bloqué
5.

Dans la méthode suivante, xx.js sera chargé et exécuté de manière asynchrone après l'exécution de appendChild

var script = document.createElement("script"); 
script.setAttribute("src","xx.js"); 
documenrt.getElementsByTagName("head")[0].appendChild(script);

6. Objet image pour précharger le fichier js de manière asynchrone (ne sera pas exécuté)

Image La requête est initiée lorsque le src est attribué, et le type de fichier n'est pas pointilleux (l'image peut également être créée dynamiquement par un script, tel qu'un code de vérification), donc l'url du fichier js peut être attribuée à image.src, et le js sera chargé par le Cache du navigateur

var img = new Image(); 
img.onload = function(){ alert(1); } ; //由于返回的js文件 MIME 不是图片，onload回调函数并不会被触发
img.src = 'http://localhost/test/loadjs/try.2.js'; 
var s = document.createElement("script"); 
var h = document.getElementsByTagName("head")[0]; 
//执行 js 
s.src=img.src; 
h.appendChild(s);

Une fonction qui charge les fichiers js :

var loadJS = function(url,callback){ 
var head = document.getElementsByTagName('head'); 
if(head&&head.length){ 
head = head[0]; 
}else{ 
head = document.body; 
} 
var script = document.createElement('script'); 
script.src = url; 
script.type = "text/javascript"; 
head.appendChild( script); 
script.onload = script.onreadystatechange = function(){ 
//script 标签，IE 下有 onreadystatechange 事件, w3c 标准有 onload 事件 
//这些 readyState 是针对IE8及以下的，W3C 标准的 script 标签没有 onreadystatechange 和 this.readyState , 
//文件加载不成功 onload 不会执行， 
//(!this.readyState) 是针对 W3C标准的, IE 9 也支持 W3C标准的 onload 
if ((!this.readyState) || this.readyState == "complete" || this.readyState == "loaded" ){ 
callback(); 
} 
}//end onreadystatechange 
}

<.>

Pour le test du point 4 (chargement synchrone) (insérer une alerte dedans pour voir facilement le blocage lors du chargement) .

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!