So optimieren Sie das Laden von Skripten

Wenn wir einfach im Kopf oder im Text auf das Skript verweisen, blockiert das Skript das Rendern der Seite während des Herunterladens und der Ausführung vollständig, da nicht bekannt ist, ob das DOM geändert wird.

Wenn sich das Skript in der Mitte des Kopfes oder Körpers befindet, ist es sehr wahrscheinlich, dass eine leere Seite angezeigt wird und keine Benutzerinteraktion möglich ist, was zu einer schlechten Benutzererfahrung führt.

Auch wenn Javascript-Dateien parallel heruntergeladen werden können, wirkt sich der Downloadvorgang auf das Herunterladen von Bildern und anderen Ressourcen aus.

Was wir also zuerst tun müssen, ist:

Platzieren Sie das Skript-Tag am unteren Rand des Körpers;

Da es zusätzlichen Leistungsaufwand gibt , wie zum Beispiel Drei-Wege-Handshake, also versuchen Sie, HTTP-Anfragen zu reduzieren:

Javascript-Dateien zu einer zusammenführen

Mehrere Javascript-Dateien in einer Anfrage laden

Aber das oben Genannte löst unser Problem nicht. Eine große Javascript-Datei lädt das Ausführungsskript für eine lange Zeit herunter, und der Browser kann keine anderen Dinge tun. Dies erfordert nicht blockierende Skripte, d. h. der Javascript-Code wird erst geladen, nachdem die Seite geladen wurde, d. h. das Skript wird heruntergeladen, nachdem das Ladeereignis des Fensterobjekts ausgelöst wurde.

1 Verzögerungsskript

Verzögerung: Zunächst müssen wir sicherstellen, dass das Skript das DOM nicht ändert, da das Hinzufügen dem Browser mitteilt, dass dieses Skript das DOM nicht ändert kann nach dem Laden der Seite ausgeführt werden. Nach dem Hinzufügen dieses Attributs zum Skript-Tag kann die Datei parallel zu anderen Ressourcen heruntergeladen werden. IE unterstützt Defer ab IE10 nicht.

asynchron: Der Unterschied zu Defer besteht darin, dass es nach Abschluss des Downloads ausgeführt wird, Defer jedoch erst ausgeführt wird, wenn die Seite geladen ist

2 Dynamisches Skript

Das bedeutet, dynamisch ein Skript-Tag zu erstellen und es zum richtigen Zeitpunkt in die Seite einzufügen. Mit dieser Methode können wir Dateien nach Bedarf laden und auch die Ladereihenfolge des Skripts festlegen .

3 XMLHttpRequest-Skriptinjektion

besteht darin, das Skript über XHR abzurufen, dann ein Skript-Tag in der Rückruffunktion zu erstellen und es in die Seite einzufügen

Empfohlene Methode

Fügen Sie zunächst das für das dynamische Laden erforderliche Skript hinzu, machen Sie es so schlank wie möglich und fügen Sie eine Funktion zum Laden des Skripts hinzu

Rufen Sie die Funktion im Skript-Tag auf, um andere Skripte zu laden

Natürlich gibt es auch einige Lazy-Loading-Bibliotheken, die verwendet werden können.

Das obige ist der detaillierte Inhalt vonSo optimieren Sie das Laden von Skripten. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!