Detaillierte Erläuterung der Skriptattribute in der HTML5- und JS-Synchronisierung und des Implementierungscodes für asynchrones Laden

Skriptattribut in HTML5:
Zusätzlich zu den durch den neuen HTML5-Standard definierten Attributen hat das
Skript-Tag in HTML5 im Vergleich zu HTML4.01 das Sprachattribut entfernt und das Typattribut so geändert, dass es optional ist (Standardtext /javascript) und ein neues Attribut async wird hinzugefügt.
async: boolean, die Rolle des Attributs, definiert, ob das Skript asynchron ausgeführt wird, der Wert ist wahr oder falsch.
Wenn async auf true gesetzt ist, wird das Defer-Attribut ignoriert.
Es wird davon ausgegangen, dass asynchron ausgeführte js-Dateien document.write() nicht verwenden, um Inhalte in das Ladedokument zu schreiben. Verwenden Sie also document.write() nicht während des Ladens und der Ausführung asynchron ausgeführter js-Dateien
Außer zusätzlich Zum Skript-Tag-Attribut wirkt sich die Art und Weise, wie die Seite die JS-Datei einführt, auf deren Lade- und Ausführungsmodus aus:
Jede JS-Datei, die durch Hinzufügen eines Skriptknotens (z. B. appendChild(scriptNode)) eingeführt wird, wird asynchron ausgeführt (scriptNode muss eingefügt werden). Durch einfaches Erstellen des Knotens und Festlegen von src wird die js-Datei nicht geladen, was nicht mit dem Vorladen von img vergleichbar ist.
Der Code im 3f1c4e4b6b16bbbd69b2ee476dc4f83a-Tag in der html-Datei oder der Code im js Die von src referenzierte Datei wird synchron geladen. Der Code im
html-Tag wird asynchron ausgeführt. Die mit document.write() eingeführte JS-Datei wird asynchron ausgeführt
HTML-Datei wird durch das src-Attribut referenziert. Die mithilfe der document.write()-Methode im Code der JS-Datei eingeführte JS-Datei wird synchron ausgeführt.
Verwenden Sie das Image-Objekt, um die JS-Datei asynchron vorab zu laden (wird nicht ausgeführt). ausgeführt werden)

Verwenden Sie nicht so etwas wie das Folgende. Diese Methode initiiert keine Anfrage zum Laden der js-Datei:
pNode.innerHTML = '9318febed1adb7e0ea1d696c0cf7b4fb< ;/script>';

window.onload-Ereignis wird in js ausgeführt. Wird erst ausgelöst, nachdem die Datei geladen wurde (auch wenn sie asynchron geladen wird)

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>

Es gibt den folgenden Code in xx. js:

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

Dann werden xx.js und 11.js, 22 .js alle synchron geladen und ausgeführt.
Wenn xx.js, 11.js und 22.js durch Einfügen von Skriptknoten asynchron geladen werden, werden 11.js und 22.js asynchron geladen.
Wenn xx.js durch Einfügen von Skriptknoten asynchron geladen wird, 11.js und 22.js werden im document.write(script)-Modus geladen, dann werden 11.js und 22.js synchron geladen (getestet mit dem neuesten Browser, unter Chrome ist die asynchrone Ladeausführung von xx.j nicht mehr möglich verwendet werden) document.write() schreibt Inhalt in das Dokument, aber Firefox und IE können schreiben, bevor das Dokument geschlossen wird (die Methode besteht darin, Warnung in HTML zu verwenden, um zu verhindern, dass das Dokument geschlossen wird))
Test: alarm() in 11.js (Verwenden Sie keine for-Schleife, der Browser wird in einem einzelnen Thread ausgeführt und die weitere Ausführung eines Codeteils führt dazu, dass der Rest des Codes blockiert wird), console.log() in 22.js , Sie können sehen, dass der Code in 22.js blockiert ist
5.

In der folgenden Methode wird xx.js asynchron geladen und ausgeführt, nachdem appendChild ausgeführt wurde

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

6. Verwenden Sie das Image-Objekt, um die js-Datei asynchron vorab zu laden (wird nicht ausgeführt)

Image Die Anforderung wird initiiert, wenn der Quellcode zugewiesen wird und der Dateityp nicht wählerisch ist (das Image kann auch dynamisch durch ein Skript erstellt werden, z als Bestätigungscode), damit die URL der js-Datei image.src zugewiesen werden kann und die js vom Browser-Cache geladen werden

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);

Eine Funktion, die js-Dateien lädt:

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 
}

Für den Test von Punkt 4 (synchrones Laden) (durch Einfügen eines Alarms ist die Blockierung während des Ladens leicht zu erkennen) .

Das obige ist der detaillierte Inhalt vonDetaillierte Erläuterung der Skriptattribute in der HTML5- und JS-Synchronisierung und des Implementierungscodes für asynchrones Laden. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!