Wie lade ich js asynchron? Einführung in die Methode zum asynchronen Laden von js

Wie lade ich js asynchron? In diesem Artikel werden drei Methoden zum asynchronen Laden von js vorgestellt. Freunde in Not können sich darauf beziehen. [Video-Tutorial-Empfehlung: JavaScript-Video-Tutorial]

js-Ladezeitleiste:

Es wurde basierend auf js geboren Eine Reihe von Dingen, die der Browser ab diesem Moment nacheinander ausführt, beschreiben die Ladesequenz, was zur Optimierung verwendet werden kann, die theoretische Grundlage, merken es sich

1 und erstellen ein Dokumentobjekt Beginnen Sie mit dem Parsen der Webseite. Fügen Sie dem Dokument Elementobjekte und Textknoten hinzu, nachdem Sie HTML-Elemente und ihren Textinhalt analysiert haben. Zu diesem Zeitpunkt document.readyState = 'loading'. (Generieren Sie ein Dokumentobjekt und das Dokumentstatusbit ändert sich in „Laden“)

2 Wenn Sie auf einen externen CSS-Link stoßen, erstellen Sie einen Thread zum Laden und fahren Sie mit der Analyse des Dokuments fort.

3 Wenn ein Skript auf ein externes JS trifft und kein Async oder Defer eingestellt ist, lädt und blockiert der Browser, wartet auf das Laden des JS, führt das Skript aus und fährt dann fort um das Dokument zu analysieren.

4 Wenn Sie auf externe JS-Skripts stoßen und Async und Defer einrichten, erstellt der Browser einen Thread zum Laden und analysiert das Dokument weiter. Bei Skripten mit asynchronen Attributen werden diese sofort nach dem Laden des Skripts ausgeführt. (Es ist verboten, document.write() asynchron zu verwenden)

document.write(): Es ist etwas ganz Besonderes. Es behandelt den Inhalt als HTML-Dokument und gibt ihn auf der Seite aus Manchmal, wenn das gesamte Dokument fast analysiert ist und Sie document.write() verwenden, werden alle Ihre vorherigen Dokumentströme gelöscht und der darin enthaltene Dokumentstrom wird anstelle von

verwendet. Die gesamte Seite zeigt hier nur a an. document.write(); hat hier die Funktion, den Dokumentenfluss zu eliminieren, und sogar das Skript wird eliminiert.

<p style="height:100px;width:100px;background-color:red;"></p>

<script type="text/javascript">
    window.onload = function(){
        document.write(&#39;a&#39;);
    }
</script>

5 Wenn Sie auf IMG usw. stoßen, analysieren Sie zuerst die Dom-Struktur normal, dann lädt der Browser src asynchron und analysiert das Dokument weiter.

6 Wenn die Dokumentenanalyse abgeschlossen ist, ist document.readyState = 'interactive'.

Zuerst analysieren, dann laden, und dann ändert sich das Statusbit auf interaktiv (aktiv)

Statusbitübergang anzeigen:

console.log(document.readyState);
document.onreadystatechange = function(){
     console.log(document.readyState);
}

7 Nachdem die Dokumentanalyse abgeschlossen ist, werden alle mit „Defer“ eingestellten Skripte der Reihe nach ausgeführt. (Beachten Sie, dass es sich von asynchron unterscheidet, aber die Verwendung von (document.write()) ebenfalls verboten ist; , in eine ereignisgesteuerte Phase umgewandelt.

Beispiel 1: Drucken Sie ein aus und füllen Sie es gleichzeitig aus , und onDOMContentLoaded ist nicht einfach zu verwenden. Es kann nur verwendet werden, wenn es an addEventListener gebunden ist. Beispiel 2: Der Unterschied zwischen window.onload und dem folgenden >Der Unterschied besteht darin: window.onload wird nach Bedarf geladen, kann aber nach dem Parsen ausgeführt werden (dies ist die jQuery-Methode)Beispiel 3: Wenn Sie das obige Skript platzieren, ist es am besten, es zu schreiben So schreiben Sie nicht onload, schreiben Sie niemals onload, aber der beste Weg ist, es unten zu schreiben

console.log(document.readyState);
document.onreadystatechange = function(){
     console.log(document.readyState);
}
document.addEventListener('DOMContentLoaded',function(){
      console.log('a');
},false)

9
Wenn alle asynchronen Skripte geladen und ausgeführt sind, und img usw. werden geladen, document.readyState = 'complete', das Fensterobjekt löst das Ladeereignis

10

aus. Von da an werden Benutzereingaben, Netzwerkereignisse usw. verarbeitet
Die Zusammenfassung besteht aus drei Punkten: Erstens wird das Dokumentobjekt generiert, was bedeutet, dass js ausgeführt werden kann. Der zweite Schritt besteht darin, das Dokument zu analysieren, und der dritte Schritt besteht darin, das Dokument zu laden ausgeführt.

Sehen wir uns drei Möglichkeiten an, um js asynchron zu laden:

Methoden, um js asynchron zu laden:

---

1), asynchrones HTML5-Attribut, ermöglicht das asynchrone Laden von JavaScript-Code

$(document).ready(function(){
    //当DOM解析完就执行的部分（不用加载完，加载完是给用户看的，对于我们来说解析完就可以操作了）
    /*它的原理就是interactive和DOMContentLoaded事件*/
})

2) Defer ist exklusiv für alte Versionen von IE

<head>
    <meta charset="UTF-8">
    <title>lottery</title>
    <script type="text/javascript">
        document.addEventListener(&#39;DOMContentLoaded&#39;,function(){
            var p = document.getElementsByTagName(&#39;p&#39;)[0];
            console.log(p);
        },false)
    </script>
    script标签写在上面又能处理下面的代码，而且效率还高，因为登高DOM解析完就执行，而不是DOM加载完
</head>
//script标签写在上面又能处理下面的代码，而且效率还高，因为登高DOM解析完就执行，而不是DOM加载完

3) Skript dynamisch erstellen Tags (Es kann das Problem der Kompatibilität mit h5 und niedrigeren Versionen von ie lösen), der Code lautet wie folgt:

<script type="text/javascript" src="05.js" async="async"></script>

Das Obige ist der gesamte Inhalt dieses Artikels, ich hoffe, dass er für das Lernen aller hilfreich ist . Weitere spannende Inhalte finden Sie in den entsprechenden Tutorial-Kolumnen auf der chinesischen PHP-Website! ! !

Das obige ist der detaillierte Inhalt vonWie lade ich js asynchron? Einführung in die Methode zum asynchronen Laden von js. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!