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");

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);});

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

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.

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
//如果只支持一个，则执行对应的即可

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!