Zusammenfassung, wie Javascript Implementierungsmethoden für asynchrones Laden löst

Standardmäßig wird Javascript synchron geladen, das heißt, das Javascript wird beim Laden blockiert. Die nachfolgenden Elemente müssen warten, bis Javascript geladen wird, bevor sie erneut geladen werden können Am Kopf der Seite führt dies zu langsamem Laden, was die Benutzererfahrung erheblich beeinträchtigt.

(1) defer, unterstützt nur IE
Definition und Verwendung des defer-Attributs
Das defer-Attribut gibt an, ob die Skriptausführung verzögert werden soll, bis die Seite geladen ist.
Einige Javascript-Skripte verwenden die Methode document.write, um den aktuellen Dokumentinhalt zu erstellen, andere Skripte jedoch möglicherweise nicht.

Wenn Ihr Skript den Inhalt des Dokuments nicht ändert, können Sie das Defer-Attribut zum 3f1c4e4b6b16bbbd69b2ee476dc4f83a-Tag hinzufügen, um die Dokumentverarbeitung zu beschleunigen. Da der Browser weiß, dass er den Rest des Dokuments sicher lesen kann, ohne das Skript auszuführen, verzögert er die Interpretation des Skripts, bis das Dokument dem Benutzer angezeigt wurde.
Beispiel:

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

(2) async:
Definition und Verwendung von async (es ist ein Attribut von HTML5)
Das async-Attribut gibt an, dass es, sobald das Skript verfügbar ist wird asynchron ausgeführt.
Beispiel:

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

Hinweis: Das async-Attribut gilt nur für externe Skripte (nur bei Verwendung des src-Attributs).
Hinweis: Es gibt mehrere Möglichkeiten, externe Skripte auszuführen:
• Wenn async="async": Das Skript wird relativ zum Rest der Seite asynchron ausgeführt (das Skript wird ausgeführt, während die Seite weiterhin analysiert wird). )
•Wenn Async nicht verwendet wird und defer="defer": Das Skript wird ausgeführt, wenn die Analyse der Seite abgeschlossen ist
•Wenn weder Async noch Defer verwendet wird: Das Skript wird gelesen und ausgeführt, unmittelbar bevor der Browser fortfährt um die Seite zu analysieren

(3) Skript erstellen, in DOM einfügen, nach dem Laden zurückrufen, siehe 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); 
}

Das obige ist der detaillierte Inhalt vonZusammenfassung, wie Javascript Implementierungsmethoden für asynchrones Laden löst. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!