Analyse des asynchronen Ladens des Browsers in JavaScript

Der Inhalt dieses Artikels befasst sich mit der Analyse des asynchronen Ladens von Browsern in JavaScript. Ich hoffe, dass er für Freunde hilfreich ist.

Als wir js zum ersten Mal lernten, hätten wir wissen müssen, dass js Single-Threaded ist und synchron geladen wird, was die Ladezeile von HTML und CSS blockiert (da js HTML und CSS ändern kann)

Nachteile des synchronen Ladens von js: Die Lade-Tool-Methode muss das Dokument nicht blockieren. Sobald die Netzwerkgeschwindigkeit nicht gut ist, wird die gesamte Website gewartet damit js geladen werden kann, ohne dass anschließendes Rendern und andere Arbeiten erforderlich sind.

Einige Tools und Methoden in js müssen bei Bedarf geladen werden. Müssen Sie sie laden? ? ? Zu diesem Zeitpunkt müssen wir js asynchron laden.

Drei Optionen für das asynchrone Laden von JavaScript.

1. Defer wird asynchron geladen, aber erst ausgeführt, wenn alle DOM-Dokumente analysiert sind. Es kann nur IE verwendet werden, Sie können auch den gesamten Code intern schreiben

 <script type = "text/javascript" src = "tools.js"  defer = "defer"></script>

<script defer = "defer">
console.log("a");
</script>

2. Asynchrones asynchrones Laden, nach dem Laden ausgeführt, asynchron kann nur externe Skripte laden und keine js in das Skript-Tag schreiben

 <script type = "text/javascript" aysnc = "aysnc"></script>

Die beiden oben genannten Methoden blockieren die Seite bei Ausführung nicht

Um das Browserkompatibilitätsproblem zu lösen? ? Wenn die beiden Methoden 1, 2 und 2 gleichzeitig geladen werden, kommt es zu Codeüberschneidungen und Konflikten in der Ausführungsreihenfolge. Daher wird die dritte Methode eingeführt. Die gemeinsame Methode

3. Erstellen Sie ein Skript. Fügen Sie es in das DOM ein und rufen Sie zurück, nachdem der Ladevorgang abgeschlossen ist.

 var script = document.createElement('script');
 script.type = "text/javescript";
 script.src = "demo.js";
// 此时就会加载src地址里面的东西
// 此时会有一个灯塔模式，灯塔模式会产生一个img属性，用来存放地址的加载
document.head.appendChild(script);  //----此时就会在页面上展示js里面的内容

Wenn wir eine Testfunktion in die externe js-Datei schreiben

var script = document.createElement('script');
script.type = "text/javascript";
script.src = "demo.js";
test();
document.head.appendChild(script);

Die externe Datei demo.js wird nicht angezeigt Hier gibt es eine Testfunktion. Die Ergebnisse sind wie folgt:

Wenn die Testfunktion ausgeführt wird, dauert das Laden. Wenn der Test ausgeführt wird, wurde er noch nicht geladen. Es wird also angezeigt, dass der Test nicht definiert ist. Wie lösen wir dieses Problem?

Zuerst denken wir an das Onload-Event.

script.onload: Die Kompatibilität ist sehr gut, Safari Chrome Firefox Opera ist kompatibel

 script.onload = function(){
                                test();
                            }

Aber IE hat kein Onload-Ereignis für Skripte, IE hat seine eigene Methode: script.readyState .

script.readyState: Es gibt einen Statuscode (readyState) im IE-Skript, und der Statuscode wird überprüft, um festzustellen, ob es geladen ist. Im IE verfügt das Skript-Tag über ein readyStatechange-Ereignis. Dieses Ereignis wartet auf ein Ereignis, das ausgelöst wird, wenn sich der script.readyState-Wert ändert.

（script.readyState == „complete“ ||. script.readyState == „loaded“ bedeutet, dass das Parsen abgeschlossen ist.)

script.onreadystatechange = function(){
      if(script.readyState == "complete" || script.readyState == "loaded"){
                  callback(); //回调函数：当满足一定条件才可以被执行
              }
                  }

Schließlich kapseln wir die Funktion, um unsere On zu realisieren -Demand-Ladefunktion.

 function loadScript(url,callback){
                        var script = document.createElement('script');
                        script.type = "text/javascript";
                        if(script.readyState){
                            script.onreadyStatechange = function(){
                                if (script.readyState == "loaded" || script.readyState == "complete") {
                                    obj[callback]();
                                }
                            }    
                        }else{
                            script.onload = function(){
                                obj[callback]();
                            }
                        }
                        script.src = url;
                        document.head.appendChild(script);
                    }

                    loadScript('demo.js','test');

Empfohlene verwandte Artikel:

JS-Tutorial – Implementierung und Lösung von Fehlern beim Löschen von Array-Schleifen

[Javascript] Zepto-Quellcode-Rückrufanalyse

Das obige ist der detaillierte Inhalt vonAnalyse des asynchronen Ladens des Browsers in JavaScript. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!