Erlernen Sie die Fähigkeiten zur Optimierung des Ladens von Javascript-Dateien

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 ausgeführt werden. Hier können wir also viel Optimierungsarbeit leisten.

am unteren Rand von BODY

platziert

Damit die Rendering-Engine den DOM-Baum so früh wie möglich rendern kann, müssen wir das Skript am unteren Rand des Hauptteils platzieren, damit die Seite so schnell wie möglich aus dem weißen Bildschirm verschwinden kann, d. h. Das DOMContentLoaded-Ereignis wird jedoch frühzeitig ausgelöst, da in iOS Safari, Android Auch wenn Sie das js-Skript am Ende des Körpers in Browser und iOS-Webansicht einfügen, ist das Ergebnis immer noch dasselbe, sodass hier zusätzliche Vorgänge zur Optimierung erforderlich sind Die js-Datei wird geladen.

LADEN VERSCHIEBEN

Dies ist ein in HTML4 definiertes Skriptattribut. Es wird verwendet, um anzugeben, dass das Skript, wenn es auf ein Skript stößt, 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 Darüber hinaus ist die Ausführungsreihenfolge streng davon abhängig, nämlich:

<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 „outside1“ und „outside2“ der Reihe nach.

Wenn Sie defer unter IE9 verwenden, kann es sein, dass die beiden nicht nacheinander ausgeführt werden. Um damit umzugehen, müssen Sie einen leeren Skript-Tag
zwischen den beiden einfügen.

<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, 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, stoppt der Browser die Analyse des Dokuments, erteilt der JS-Engine die Berechtigung und gibt das geladene Skript an.
• Nach der Ausführung wird das Browser-Parsing-Skript wiederhergestellt

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 abhängige Dateien im Allgemeinen nicht asynchron, sondern zurückgestellt werden.

Die Kompatibilität von defer ist relativ schlecht, es handelt sich um IE9, wird aber im Allgemeinen auf mobilen Endgeräten verwendet, sodass dieses Problem nicht besteht.

Skript asynchron

Das asynchrone Skript ist das grundlegende Ladeprinzip, das von einigen asynchronen Ladebibliotheken verwendet wird (z. B. require). Geben Sie den Code direkt ein:

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

Zu diesem Zeitpunkt kann die Datei asynchron geladen werden, ohne dass es zu einer Blockierung kommt.

Die auf diese Weise geladenen js-Dateien sind jedoch nicht in Ordnung 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, bevor Sie mit dem Laden beginnen, wodurch das gleichzeitige Laden des Browsers nicht voll ausgenutzt werden kann. Die Verwendung von statischem Text zum asynchronen Laden oder Zurückstellen 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 oder zwei kompatibel ist . 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 aus Gründen der Abwärtskompatibilität am Ende „defer“ hinzu

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

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

Das Obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, er wird für das Studium aller hilfreich sein.