Einführung in die Verwendung von HTML5-Skriptelementen zum asynchronen und verzögerten asynchronen Laden_HTML5-Tutorial

(Anmerkung des Übersetzers: Asynchrones Laden kann als nicht blockierende gleichzeitige Verarbeitung verstanden werden.)

Einer der Gründe, warum ich von HTML5 so begeistert bin, ist, dass es viele lang erwartete Funktionen in der Branche implementiert. Wir brauchten schon immer das Eingabefeld, um eine leere Eingabeaufforderung anzuzeigen, aber das ist alles mit JavaScript implementiert. Wir möchten auch den gesamten Block anklickbar machen, wiederum mithilfe von JavaScript.
WebKit implementiert jetzt das async-Attribut des SCRIPT-Tags für HTML5. Früher haben wir dazu verschiedene JavaScript-Tricks verwendet, doch jetzt machen es neue Eigenschaften relativ einfach, das Blockieren zu verhindern.

async – HTML-Attribut
Wie ich bereits erwähnt habe, ist das Hinzufügen des async-Attributs sehr einfach:

Kopieren Sie den Code

Der Code lautet wie folgt:

Der Unterschied zwischen async und defer
Der offizielle WebKit-Blog erklärt den Unterschied zwischen async und defer sehr gut
- ---- ---------------------------------
Unter normalen Umständen, wenn der Browser analysiert Wenn die HTML-Quelldatei auf ein externes Skript stößt, wird der Analysevorgang angehalten und eine Anfrage zum Herunterladen der DOM-Analyse gesendet. Die Analyse wird erst fortgesetzt, nachdem das Skript vollständig heruntergeladen und ausgeführt wurde. Zum Beispiel:

Während des Downloadvorgangs wird der Browser daran gehindert, andere nützliche Aufgaben auszuführen, einschließlich der HTML-Analyse, der Ausführung anderer Skripte und der Anzeige CSS-Layout. Obwohl der Webkit-Preload-Scanner während der Download-Phase nachweislich Multithread-Downloads durchführen kann, kommt es bei einigen Seiten immer noch zu erheblichen Netzwerklatenzen.
Es gibt derzeit viele Techniken zur Verbesserung der Seitenanzeigegeschwindigkeit, aber alle erfordern zusätzlichen Code und browserspezifische Techniken. Jetzt können Skripte asynchrone oder zurückgestellte Attribute hinzufügen, sodass das Skript nicht synchron ausgeführt werden muss. Das Beispiel lautet wie folgt:

Code kopieren

Code wie folgt:

defer src="myDeferScript.js" onload="myInit()">

Mit async und defer markierte Skripte werden sofort heruntergeladen, ohne dass die HTML-Analyse angehalten wird Rückrufe zur Lösung des Bedarfs Dieses Skript führt die Initialisierung durch.
Der Unterschied zwischen den beiden liegt in der Ausführungszeit:
Das asynchrone Skript wird unmittelbar nach dem Herunterladen der Skriptdatei ausgeführt und seine Ausführungszeit muss vor dem Auslösen des Ladeereignisses des Fensters liegen. Das bedeutet, dass mehrere asynchrone Skripte höchstwahrscheinlich nicht nacheinander in der Reihenfolge ausgeführt werden, in der sie auf der Seite erscheinen.
Im Gegensatz dazu stellt der Browser sicher, dass mehrere Verzögerungsskripte nacheinander in der Reihenfolge ausgeführt werden, in der sie auf der HTML-Seite erscheinen, und die Ausführungszeit liegt nach Abschluss der DOM-Analyse und vor der Auslösung des DOMContentLoaded-Ereignisses des Dokuments.

Das Folgende zeigt ein Beispiel, das 1 Sekunde zum Herunterladen und 1 Sekunde zum Analysieren und Ausführen anderer Vorgänge benötigt. Wir können sehen, dass das Laden der gesamten Seite etwa 2 Sekunden dauert.

Das gleiche Beispiel, aber dieses Mal geben wir das Defer-Attribut des Skripts an, da beim Herunterladen des Defer-Skripts andere Vorgänge parallel ausgeführt werden können, sodass es etwa 1x schneller ist.

------------------------------------------------------- ----
Welche Ansichten Der Browser unterstützt Async und Defer
Es wird auch in dem oben zitierten Artikel erwähnt:

Zusätzlich zur neuen Version des Browsers, die auf Webkit basiert, hat FireFox unterstützt Die Defer- und Onload-Attribute wurden schon lange verwendet, und seit FF3.6 wurde das Async-Attribut hinzugefügt. IE unterstützt auch das Defer-Attribut, aber noch nicht das Async-Attribut. Ab IE9 wird auch das Onload-Attribut unterstützt.

aynsc Großartig!
Ich war so froh, dass das Webkit asynchron implementiert wurde. Für jede Website stellt das Blockieren einen großen Leistungsengpass dar, und die Möglichkeit, Skriptdateien direkt zum asynchronen Laden anzugeben, wird die Webseite zweifellos beschleunigen.