Ausführliche Erklärung, wie man Code für das Laden von Javascript-Dateien optimiert

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 am unteren Rand des BODY

Damit die Rendering-Engine den DOM-Baum so früh wie möglich rendern kann, müssen wir das platzieren Wenn die Seite den weißen Bildschirm so schnell wie möglich verlässt, wird das DOMContentLoaded-Ereignis frühzeitig ausgelöst. Allerdings auch, wenn Sie das js-Skript am Ende des Körpers in iOS Safari, Android-Browser und IOS-Webansicht, das Ergebnis wird immer noch das gleiche sein, daher sind zusätzliche Vorgänge erforderlich, um mit der js-Datei umzugehen. Das Laden der Datei ist optimiert.

LADEN VERSCHIEBEN

Dies ist ein Skript In HTML4 definiertes Attribut, das verwendet wird, um anzugeben, dass das Skript, wenn es auf ein Skript trifft und auf eine externe Ressource verweist, vorübergehend angehalten und geladen wird. 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>

Seine Unterstützung 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>

Wenn die Seite analysiert wird, beginnt sie mit der Ausführung der Dateien „außen1“ und „außen2“ der Reihe nach.
Wenn Sie defer unter IE9 verwenden, kann es sein, dass die beiden nicht nacheinander ausgeführt werden. Hier benötigen Sie einen Hack, um damit umzugehen, das heißt, Sie fügen ein leeres Skript-Tag zwischen den beiden ein

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

ASYNC-Laden

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

• Die Rendering-Engine analysiert die Datei und wenn sie auf ein Skript trifft (mit Asynchronität)

• Parsen Sie weiterhin die verbleibenden Dateien und laden Sie parallel die externen Ressourcen des Skripts

• Wenn das Skript geladen wird, dann Der Browser unterbricht das Parsen des Dokuments, erteilt der JS-Engine die Berechtigung und gibt das zu ladende Skript an.

• Nach der Ausführung das Browser-Parsing-Skript 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 allgemeine abhängige Dateien nicht async verwenden, sondern
defer ist schlecht kompatibel, was IE9+ entspricht, aber im Allgemeinen auf mobilen Endgeräten verwendet wird, sodass dieses Problem nicht besteht.

Skript asynchron

Skript asynchron ist das grundlegende Ladeprinzip, das von einigen asynchronen Ladebibliotheken verwendet wird (z. B. require Direkter 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 Blockierung asynchron geladen werden. Die auf diese Weise geladenen js-Dateien sind jedoch 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 auf das CSS warten Die zu ladende Datei kann nicht vollständig genutzt werden, bevor mit dem Laden begonnen wird. Die Verwendung von statischem Text zum asynchronen oder verzögerten Laden verursacht dieses Problem nicht.

Wenn Sie ein Skript 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

Was

die Wahl zwischen diesen drei betrifft, hängt es hauptsächlich davon ab, welches Ziel uns der Leiter vorgibt , ob es mit IE8, 9, Mobiltelefon, Desktop-Browser oder einer Kombination aus zwei und kompatibel ist zwei. Aber für den Fall, dass Sie eine bestimmte Fähigkeit alleine verwenden, müssen Sie bei der Verwendung einige
Tipps beachten.

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

2. Wenn Sie asynchron verwenden, fügen Sie am Ende „defer“ hinzu, um die Abwärtskompatibilität zu gewährleisten

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

Normalerweise handelt es sich bei den von uns verwendeten Lasten aufgrund starker Abhängigkeiten um verzögerte Lasten.

Das obige ist der detaillierte Inhalt vonAusführliche Erklärung, wie man Code für das Laden von Javascript-Dateien optimiert. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!