Probleme im Zusammenhang mit der Optimierung des Dateiladens in js

Im Folgenden werde ich einen Artikel zur Optimierung des Ladens von JS-Dateien (ausführliche Erklärung) mit Ihnen teilen, der einen guten Referenzwert hat und ich hoffe, dass er für alle hilfreich sein wird.

Im JS-Engine-Teil können wir lernen, dass die Rendering-Engine beim Parsen des Skript-Tags die Kontrolle an die JS-Engine übergibt. Wenn das Skript eine externe Ressource lädt, muss es warten, bis es heruntergeladen wird bevor es ausgeführt werden kann. Hier können wir also viel Optimierungsarbeit leisten.

Platzieren Sie es unten im BODY

Damit die Rendering-Engine den DOM-Baum so früh wie möglich rendern kann, müssen wir das Skript dort platzieren Das Phänomen des weißen Bildschirms bedeutet, dass das DOMContentLoaded-Ereignis frühzeitig ausgelöst wird, selbst wenn Sie das js-Skript am Ende des Körpers in iOS Safari und Android platzieren Browser und IOS-Webansicht, das Ergebnis wird immer noch das gleiche sein. Daher sind hier zusätzliche Vorgänge erforderlich, um das Laden von js-Dateien zu optimieren.

LADEN VERSCHIEBEN

Dies ist ein in HTML4 definiertes Skriptattribut, das zur Darstellung beim Rendern verwendet wird Wenn die Engine auf ein Skript stößt, wird das Skript vorübergehend angehalten und geladen, wenn es auf eine externe Ressource verweist. Die Rendering-Engine analysiert weiterhin das folgende HTML-Dokument. Wenn die Analyse abgeschlossen ist, wird das Skript im Skript ausgeführt.

<script src="outside.js" defer></script>

Sein Support ist <=IE9.

Und seine Ausführungsreihenfolge ist streng abhängig, das heißt:

<script src="outside1.js" defer></script>
<script src="outside2.js" defer></script>

Nachdem die Seite analysiert wurde, beginnt er mit der Ausführung Outside1- und Outside2-Dateien nacheinander.

Wenn Sie defer unter IE9 verwenden, werden die beiden möglicherweise nicht nacheinander ausgeführt. Um dies zu handhaben, ist ein Hack erforderlich, der darin besteht, ein leeres Skript-Tag zwischen den beiden

<script src="outside1.js" defer></script>
<script></script> //hack
<script src="outside2.js" defer></script>

< einzufügen 🎜>

ASYNC-Laden

async ist ein neu definiertes Skriptattribut in H5. Es ist ein weiterer js-Lademodus.

Die Rendering-Engine analysiert die Datei (mit Asynchronität)

parst weiterhin die verbleibenden Dateien und lädt parallel die externen Ressourcen des Skripts.

Wenn das Skript geladen wird, stoppt der Browser die Analyse des Dokuments, erteilt der JS-Engine die Berechtigung und gibt das zu ladende Skript an.

Nach der Ausführung das Browser-Analyseskript fortsetzen

Es ist ersichtlich, dass Async auch das Problem des Blockierens des Ladens lösen kann. Allerdings wird async asynchron ausgeführt, was dazu führt, dass die Reihenfolge der Dateiausführung inkonsistent ist. Das heißt:

<script src="outside1.js" async></script>
<script src="outside2.js" async></script>

Zu diesem Zeitpunkt wird derjenige zuerst ausgeführt, der zuerst mit dem Laden fertig ist. Daher sollten Sie für allgemein abhängige Dateien nicht asynchron verwenden, sondern aufschieben.

defer hat eine schlechte Kompatibilität, was IE9+ entspricht, wird aber im Allgemeinen auf mobilen Endgeräten verwendet, sodass dieses Problem nicht besteht.

Skript asynchron

Skript asynchron ist das grundlegende Ladeprinzip, das von einigen asynchronen Ladebibliotheken verwendet wird (z. B. require) Gehen Sie direkt zum Code:

function asyncAdd(src){
  var script = document.createElement('script');
  script.src = src;
  document.head.appendChild(script);
}
//加载js文件
asyncAdd("test.js");

Zu diesem Zeitpunkt können Dateien ohne Blockierungseffekte asynchron geladen werden

Allerdings sind die auf diese Weise geladenen js-Dateien nicht in der richtigen Reihenfolge und abhängige Dateien können nicht normal geladen werden.

Zu diesem Zeitpunkt müssen wir die obige Funktion optimieren.

var asyncAdd = (function(){
  var head = document.head,
    script;
  return function(src){
    script = document.createElement('script');
    script.src= src;
    script.async=false;
    document.head.appendChild(script);
  }
})();
//加载文件
asyncAdd("first.js");
asyncAdd("second.js");
//或者简便一点
["first.js","second.js"].forEach((src)=>{async(src);});

Wenn Sie jedoch ein Skript zum Laden in einem Schritt verwenden, müssen Sie warten, bis die CSS-Datei geladen ist Der Ladevorgang beginnt, wodurch der Browser nicht vollständig genutzt werden kann. Vorteile des gleichzeitigen Ladens. Dieses Problem tritt nicht auf, wenn statischer Text zum asynchronen Laden oder Zurückstellen verwendet wird.

Wenn Sie Skripte zum asynchronen Laden verwenden, können Sie vor dem Laden nur warten, bis das CSS geladen ist.

Bei Verwendung des statischen asynchronen Ladens werden CSS und JS gleichzeitig geladen

Wie man zwischen den dreien wählt, hängt hauptsächlich davon ab, welches Ziel uns der Anführer gibt, ob es mit IE8, 9, Mobiltelefon, Desktop-Browser oder einer Kombination aus beiden kompatibel ist.

Aber in Szenarien, in denen eine bestimmte Fähigkeit allein verwendet wird, müssen Sie bei der Verwendung einige Tipps beachten.

Die js-Datei sollte am Ende des Körpers platziert werden

Wenn asynchron verwendet wird, fügen Sie aus Gründen der Abwärtskompatibilität „defer“ am Ende hinzu

<script src="test.js" async defer></script> //如果两者都支持，async会默认覆盖掉defer
//如果只支持一个，则执行对应的即可

Normalerweise handelt es sich bei den von uns verwendeten Lasten um verzögerte Lasten (aufgrund der starken Abhängigkeiten). Das oben Gesagte habe ich für alle zusammengestellt. Ich hoffe, dass es in Zukunft für alle hilfreich sein wird.

Verwandte Artikel:

Verwendung von Async- und Await-Funktionen in Node.js

Lösung des Problems, dass Webpack nicht auf 127.0.0.1 zugreifen kann

Remotezugriffskonfigurationsmethode im Webpack-Dev-Server implementieren

Das obige ist der detaillierte Inhalt vonProbleme im Zusammenhang mit der Optimierung des Dateiladens in js. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!