Eine kurze Analyse der asynchronen Loading_Javascript-Fähigkeiten von JavaScript-js-Tutorial-php.cn

Vorwort

Ich glaube, Sie sind auf viele Probleme beim Laden von JavaScript-Skripten gestoßen. Hauptsächlich in ein paar Punkten——

1> Probleme beim Laden von Dateien, der Dateiabhängigkeit und der Ausführungsreihenfolge, die durch synchrone und asynchrone Skripte verursacht werden
2> Leistungsoptimierungsprobleme, die durch synchrone und asynchrone Skripte verursacht werden

Ein gründliches Verständnis aller Aspekte im Zusammenhang mit dem Laden von Skripten hilft nicht nur bei der Lösung praktischer Probleme, sondern hilft auch dabei, Leistungsoptimierungen zu erfassen und umzusetzen.

Schauen Sie sich zunächst einen beliebigen Skript-Tag-Code an——

Code kopieren Der Code lautet wie folgt:

Wenn es über dem platziert wird, blockiert es alle Seitenrendering-Arbeiten und lässt den Benutzer in einem „weißen Bildschirm des Todes“ zurück, bis das Skript geladen und ausgeführt wird. Das Skript am Ende von ermöglicht es Benutzern nur, eine leblose statische Seite zu sehen. Der Ort, an dem das clientseitige Rendering durchgeführt werden soll, ist mit ineffektiven Steuerelementen und leeren Feldern übersät. Holen Sie sich einen Testfall –

Code kopieren Der Code lautet wie folgt:

Asynchrones Ladeskript

Ich bin der Inhalt

Unter anderem der Inhalt in test.js——

Code kopieren Der Code lautet wie folgt:

warning('Ich bin der Skriptcode im Kopf. Nach der Ausführung von js hier beginnt die Inhaltswiedergabe des Körpers!');

Wir werden sehen, dass die Warnung ein Pausenpunkt ist und die Seite zu diesem Zeitpunkt leer ist. Beachten Sie jedoch, dass zu diesem Zeitpunkt die gesamte Seite geladen wurde. Wenn der Text Tags mit bestimmten src-Attributen enthält (z. B. das img-Tag oben), hat der Browser bereits mit dem Laden verwandter Inhalte begonnen. Kurz gesagt, bitte beachten Sie, dass sich die Arbeitszeit der JS-Engine und der Rendering-Engine gegenseitig ausschließen (einige Bücher nennen es den UI-Thread).

Daher müssen die Skripte, die dafür verantwortlich sind, dass die Seite besser aussieht und einfacher zu verwenden ist, sofort geladen werden, während die Skripte, die später geladen werden können, später geladen werden sollten.

1. Verzögerte Ausführung des Skripts

Es wird immer beliebter, Skripte am Ende des -Tags zu platzieren. Auf diese Weise können Benutzer einerseits die Seite schneller sehen und andererseits können Skripte direkt auf die geladenen DOM-Elemente einwirken. Für die meisten Skripte ist dieser „Umzug“ eine enorme Verbesserung. Das Seitenmodell ist wie folgt:—

Code kopieren Der Code lautet wie folgt:

Dies beschleunigt zwar die Renderzeit der Seite erheblich, aber beachten Sie, dass dies dem Benutzer möglicherweise die Möglichkeit gibt, mit der Seite zu interagieren, bevor das BodyScript geladen wird. Der Grund dafür ist, dass der Browser diese Skripte erst laden kann, wenn das gesamte Dokument geladen wurde, was bei großen Dokumenten, die über langsame Verbindungen gesendet werden, einen Engpass darstellen kann.

Idealerweise sollte das Laden des Skripts gleichzeitig mit dem Laden des Dokuments erfolgen und sich nicht auf die Darstellung des DOM auswirken. Auf diese Weise können Sie das Skript ausführen, sobald das Dokument fertig ist, da die Skripte bereits in der Reihenfolge der <script>-Tags geladen wurden. </p> <p></p> <p>Wir können defer verwenden, um diese Anforderung zu erfüllen, das heißt - </p> <p><br> </p> <div class="codetitle"> <span><a style="CURSOR: pointer" data="92200" class="copybut" id="copybut92200" onclick="doCopy('code92200')"><u>Code kopieren</u></a></span> Der Code lautet wie folgt:</div> <div class="codebody" id="code92200"> <br> <script src="deferredScript.js"></script>

Das Hinzufügen des Defer-Attributs ist gleichbedeutend damit, dem Browser mitzuteilen: Bitte beginnen Sie jetzt mit dem Laden dieses Skripts, aber warten Sie bitte, bis das Dokument fertig ist und alle vorherigen Skripte mit dem Defer-Attribut ausgeführt wurden, bevor Sie es ausführen.

Auf diese Weise bietet die Platzierung des Verzögerungsskripts im Head-Tag alle Vorteile der Platzierung des Skripts im Body-Tag und erhöht außerdem die Ladegeschwindigkeit großer Dokumente erheblich. Der Seitenmodus ist derzeit——

Aber nicht alle Browser unterstützen die Verzögerung (bei einigen modernen Browsern führen ihre internen Skripte, wenn die Verzögerung deklariert ist, keine document.write- und DOM-Rendering-Vorgänge aus. IE4 unterstützt alle das Defer-Attribut). Das heißt, wenn Sie sicherstellen möchten, dass Ihr verzögertes Skript nach dem Laden des Dokuments ausgeführt werden kann, müssen Sie den gesamten verzögerten Skriptcode in einer Struktur wie $(document).ready von jQuery kapseln. Es lohnt sich, denn fast 97 % Ihrer Besucher profitieren von den Vorteilen des parallelen Ladens, während die anderen 3 % weiterhin Zugriff auf voll funktionsfähiges JavaScript haben.

Das Laden und Ausführen von Skripten einen Schritt beschleunigen. Ich möchte nicht darauf warten, dass Verzögerungsskripte nacheinander ausgeführt werden (Verzögerung erinnert uns an ein geordnetes Warteschlangenszenario, bei dem wir still und leise auf das Laden des Dokuments warten). Ich möchte warten, bis das Dokument fertig ist, bevor ich diese Skripte ausführe. Ich möchte so schnell wie möglich laden und diese Skripte so schnell wie möglich ausführen. Hier fällt mir das Async-Attribut von HTML5 ein, aber seien Sie sich bewusst, dass es sich um eine chaotische Anarchie handelt.

Zum Beispiel laden wir zwei völlig unabhängige Skripte von Drittanbietern, die Seite läuft auch ohne sie einwandfrei und es ist uns egal, welches zuerst und welches zuletzt ausgeführt wird. Daher ist die Verwendung des async-Attributs für diese Drittanbieter-Skripte gleichbedeutend mit einer Verbesserung ihrer Ausführungsgeschwindigkeit, ohne einen Cent auszugeben.

Das Async-Attribut ist neu in HTML5. Die Funktion ähnelt der Funktion „defer“, die das DOM-Rendering beim Herunterladen des Skripts ermöglicht. Es wird jedoch so schnell wie möglich nach dem Herunterladen ausgeführt (dh die JS-Engine wird ausgeführt, sobald sie inaktiv ist), und es gibt keine Garantie dafür, dass das Skript in der richtigen Reihenfolge ausgeführt wird. Sie werden vor dem Onload-Ereignis abgeschlossen.

Firefox 3.6, Opera 10.5, IE 9 und die neuesten Chrome- und Safari-Versionen unterstützen alle das Async-Attribut. Sie können async und defer gleichzeitig verwenden, sodass alle IE nach IE 4 asynchrones Laden unterstützen. Beachten Sie jedoch, dass async defer überschreibt.

Achten Sie hier auf die Reihenfolge der Ausführung – jede Skriptdatei wird geladen, dann wird headScript.js ausgeführt und dann wird defferedScript.js im Hintergrund geladen, während das DOM gerendert wird. Am Ende des DOM-Renderings werden dann defferedScript.js und die beiden asynchronen Skripte ausgeführt. Es ist zu beachten, dass diese beiden Skripte bei Browsern, die das Async-Attribut unterstützen, nicht in der richtigen Reihenfolge ausgeführt werden.

Obwohl die Funktionen der beiden oben genannten Skriptattribute sehr attraktiv sind, werden sie aufgrund von Kompatibilitätsproblemen nicht häufig verwendet. Daher verwenden wir Skripte häufiger, um andere Skripte zu laden. Beispielsweise möchten wir ein Skript nur für diejenigen Benutzer laden, die bestimmte Bedingungen erfüllen, was oft als „Lazy Loading“ bezeichnet wird.

Auf der Browser-API-Ebene gibt es zwei sinnvolle Möglichkeiten, Serverskripte abzurufen und auszuführen –

1> Ajax-Anfrage generieren und Eval-Funktion verwenden, um die Antwort zu verarbeiten