Zusammenfassung der Methoden zum asynchronen Laden von JS-Dateien (mit Code)

Dieser Artikel bietet Ihnen eine Zusammenfassung der asynchronen Lademethode von js-Dateien (mit Code). Ich hoffe, dass er für Freunde hilfreich ist.

Warum asynchrones Laden: Das synchrone Laden blockiert die nachfolgende Verarbeitung des Browsers, dh nur wenn die aktuelle Datei geladen wird, kann die nächste Datei geladen (z. B. Bilder), gerendert usw. werden. und Code implementiert werden. Wenn in js Verhaltensweisen wie das Ausgeben von Dokumentinhalten, das Ändern von DOM, Umleiten usw. auftreten, führt dies zu einer Seitenblockierung.

Was ist asynchrones Laden: Asynchrones Laden blockiert nicht nachfolgende Vorgänge des Browsers, d. h. während des Ladens und Ausführens von js werden andere Dateien parallel geladen, um die Seite zu rendern.

Methode 1: async-Attribut Das
async-Attribut gibt an, dass die js-Datei ausgeführt wird, sobald sie verfügbar ist, und das Skript relativ zum Rest asynchron ausgeführt wird die Seite (wenn die Seite weiter analysiert wird, wird das Skript ausgeführt)

Das async-Attribut gilt nur für externe Skripte (nur bei Verwendung des src-Attributs).

Das Async-Attribut garantiert keine Ausführungsreihenfolge.

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

Methode 2: defer-Attribut Das
defer-Attribut gibt an, ob die Skriptausführung verzögert werden soll, bis die Seite geladen ist. Das Attribut

defer bedeutet, dass das Skript den Inhalt des Dokuments nicht ändert. Der Browser weiß, dass er den Rest des Dokuments sicher lesen kann, ohne das Skript auszuführen bis das Dokument dem Benutzer angezeigt wurde. um die Dokumentenverarbeitung zu beschleunigen.

Nur ​​Internet Explorer unterstützt das Defer-Attribut.

<script type="text/javascript" defer="defer"></script>

Methode 3: DOM dynamisch erstellen
Die gleiche js-Quelle ist nicht erforderlich

Diese Codes sollten vor dem Tag platziert werden (nahe dem Ende der HTML-Datei)

Diese Lademethode verhindert, dass das Onload-Ereignis vor dem ausgelöst wird Der Ladevorgang ist abgeschlossen und viele davon sind jetzt Der Code der Seite muss beim Laden zusätzliche Renderarbeiten ausführen, sodass die Initialisierungsverarbeitung einiger Seiten weiterhin blockiert wird.

<script type="text/javascript">
    function downloadJSAtOnload() {
        var element = document.createElement("script");
        element.src = "defer.js";
        document.body.appendChild(element);
    }     
</script>

Methode 4: DOM während des Ladens dynamisch erstellen
Benötigt keinen js-Quellcode

Diese Codes sollten vor dem Tag (nahe dem unteren Rand) platziert werden HTML-Datei)

Diese Lademethode startet das asynchrone Laden von js nicht sofort, sondern startet das asynchrone Laden erst beim Onload. Dies löst das Problem der Blockierung der Auslösung von Onload-Ereignissen.

<script type="text/javascript">    
function downloadJSAtOnload() {        
var element = document.createElement("script");
        element.src = "defer.js";        
        document.body.appendChild(element);
    }    
    if (window.addEventListener)        
    window.addEventListener("load", downloadJSAtOnload, false);    
    else if (window.attachEvent)        
    window.attachEvent("onload", downloadJSAtOnload);    
    else window.onload = downloadJSAtOnload;
</script>

Verwandte Empfehlungen:

Das obige ist der detaillierte Inhalt vonZusammenfassung der Methoden zum asynchronen Laden von JS-Dateien (mit Code). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!