Zusammenfassung gängiger Methoden zum Laden von JavaScript-Skriptdateien in HTML

Wenn der Browser auf das (eingebettete) 3f1c4e4b6b16bbbd69b2ee476dc4f83a-Tag stößt, kann der aktuelle Browser nicht wissen, ob JavaScript den Seiteninhalt ändert. Daher stoppt der Browser zu diesem Zeitpunkt die Verarbeitung der Seite, führt zuerst den JavaScript-Code aus und fährt dann mit dem Parsen und Rendern der Seite fort. Die gleiche Situation tritt auch bei der Verwendung des src-Attributs zum Hinzufügen von JavaScript (d. h. externem Link-JavaScript) auf. Der Browser muss zunächst Zeit damit verbringen, den Code in der externen Linkdatei herunterzuladen und ihn dann zu analysieren und auszuführen. Während dieses Vorgangs werden das Rendern der Seite und die Benutzerinteraktion vollständig blockiert.

Mit anderen Worten: Immer wenn der Browser das 3f1c4e4b6b16bbbd69b2ee476dc4f83a-Tag analysiert (egal ob eingebetteter oder externer Link), priorisiert der Browser das Herunterladen und Parsen und führt das JavaScript aus Code im Tag, der das Herunterladen und Rendern aller nachfolgenden Seiteninhalte blockiert.

Methode 1: Konventioneller Ansatz

Die traditionellste Methode besteht darin, 3f1c4e4b6b16bbbd69b2ee476dc4f83a einzufügen ; Etikett.

Dieser konventionelle Ansatz birgt jedoch schwerwiegende Leistungsprobleme. Gemäß der obigen Beschreibung der Eigenschaften des 3f1c4e4b6b16bbbd69b2ee476dc4f83a-Tags wissen wir, dass der Browser in diesem Beispiel beim Parsen des 3f1c4e4b6b16bbbd69b2ee476dc4f83a-Tags das Parsen des Inhalts beendet und zuerst die Skriptdatei herunterlädt Der darin enthaltene Code bedeutet, dass die nachfolgende Datei im Test.css-Stil und das Tag 6c04bd5ca3fcae76e30b72ad730ca86d nicht geladen werden können. Daher bleibt die Seite leer, bis der JavaScript-Code vollständig ausgeführt ist.

<script type="text/javaScript" src="example.js"></script>

Methode 2: Klassischer Ansatz

Da das 3f1c4e4b6b16bbbd69b2ee476dc4f83a-Tag den folgenden Inhalt blockiert Wäre es nicht möglich, diese schlimme Situation zu vermeiden, indem man das 3f1c4e4b6b16bbbd69b2ee476dc4f83a-Tag nach dem gesamten Seiteninhalt platziert? Platzieren Sie alle 3f1c4e4b6b16bbbd69b2ee476dc4f83a-Tags so nah wie möglich am Ende des 6c04bd5ca3fcae76e30b72ad730ca86d-Tags, um die Auswirkungen auf den Download der restlichen Seite zu minimieren.

Das parallele Herunterladen von Skripten wurde in IE8+-Browsern implementiert, aber in einigen Browsern (selbst wenn die Skriptdatei am Ende des 6c04bd5ca3fcae76e30b72ad730ca86d-Tags platziert ist) werden die Skripte auf der Seite immer noch einzeln geladen nach dem anderen. Wir brauchen also die nächste Methode: Skripte dynamisch laden.

Methode 3: Dynamisches Skript

Durch das Document Object Model (DOM) können wir fast überall auf dem Seite erstellen.

<script type=&#39;text/javascript&#39;>
  var script = document.createElement(&#39;script&#39;);
  script.type = &#39;text/javaScript&#39;;
  script.src = &#39;file1.js&#39;;
  document.getElementsByTagName(&#39;head&#39;)[0].appendChild(script);
</script>

Der obige Code erstellt dynamisch ein 3f1c4e4b6b16bbbd69b2ee476dc4f83a-Tag der externen Linkdatei1 und fügt es dem 93f0f5c25f18dab9d176bd4f6de5d30e-Tag hinzu. Der entscheidende Punkt dieser Technologie ist:

Egal, wann der Download gestartet wird, der Download- und Ausführungsprozess der Datei blockiert keine anderen Prozesse auf der Seite (einschließlich des Ladens von Skripten).
Diese Methode ist jedoch auch fehlerhaft. Das auf diese Weise geladene Skript wird unmittelbar nach Abschluss des Downloads ausgeführt, sodass die Reihenfolge zwischen mehreren Skripten nicht garantiert werden kann (außer Firefox und Opera). Wenn ein Skript von einem anderen Skript abhängig ist, treten wahrscheinlich Fehler auf. Um beispielsweise einen jQuery-Code zu schreiben, müssen Sie die jQuery-Bibliothek importieren. Allerdings wird die von Ihnen geschriebene jQuery-Codedatei wahrscheinlich zuerst heruntergeladen und sofort ausgeführt Definiert‘ oder Ähnliches, da jQuery zu diesem Zeitpunkt noch nicht definiert ist. Die Bibliothek wurde noch nicht heruntergeladen. Daher wurden folgende Verbesserungen vorgenommen:

<script type=&#39;text/javascript&#39;>
  function loadScript(url, callback) {
    var script = document.createElement(&#39;script&#39;);
    script.type = "text/javaScript";
    // IE和opera支持onreadystatechange
    // safari、chrome、opera支持onload
    if (script.readyState) {//IE
      script.onreadystatechange = function() {
        if (script.readyState == "loaded"
            || script.readyState == "complete") {
          script.onreadystatechange = null;
          callback();
        }
      };
    } else {//其他浏览器
      script.onload = function() {
        callback();
      };
    }
    script.src = url;
    document.getElementsByTagName(&#39;head&#39;)[0].appendChild(script);
  }
</script>

Die Verbesserung im obigen Code besteht darin, eine Rückruffunktion hinzuzufügen, die aufgerufen wird, nachdem die entsprechende Skriptdatei geladen wurde. Auf diese Weise kann das sequentielle Laden wie folgt erreicht werden (vorausgesetzt, Datei2 hängt von Datei1 ab und Datei1 und Datei3 sind unabhängig voneinander):

loadScript(‘file1.js',function(){ loadScript(‘file2.js',function(){}); }); loadScript(‘file3.js',function(){});

Datei2 beginnt mit dem Laden, nachdem Datei1 vorhanden ist geladen, um sicherzustellen, dass Datei1 vor Datei2 ausgeführt wird. Bereits vorbereitet. Datei1 und Datei3 werden parallel heruntergeladen und beeinflussen sich nicht gegenseitig. Obwohl die Funktion „loadScript“ gut genug ist, gibt es dennoch einige unbefriedigende Aspekte. Durch die Analyse dieses Codes wissen wir, dass das sequentielle Laden in der Funktion „loadScript“ durch Blockieren des Ladens des Skripts implementiert wird (wie im roten Text oben hervorgehoben). Was wir wirklich erreichen wollen, ist, dass die Skripte synchron heruntergeladen und in der entsprechenden Reihenfolge ausgeführt werden, also parallel geladen und sequentiell ausgeführt werden.

Das obige ist der detaillierte Inhalt vonZusammenfassung gängiger Methoden zum Laden von JavaScript-Skriptdateien in HTML. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!