Kommentar: Asynchrones Laden kann als nicht blockierende gleichzeitige Verarbeitung verstanden werden. In der Vergangenheit haben wir dazu verschiedene JavaScript -Techniken verwendet. Jetzt hat Webkit das asynchrische Async -Attribut des Skript -Tags für HTML5 implementiert. Interessierte Freunde können darüber lernen.
(Anmerkung des Übersetzers: Asynchrones Laden kann als nicht blockierende gleichzeitige Verarbeitung verstanden werden.)Einer der Gründe, warum ich über HTML5 begeistert bin, ist, dass es viele lang erwartete Merkmale in der Branche implementiert. Wir müssen immer leere Eingabeaufforderungen im Eingabefeld anzeigen, sie werden jedoch alle in JavaScript implementiert. Wir möchten auch, dass der gesamte Block anklickbar ist, was auch mit JavaScript implementiert wird.
Webkit implementiert nun die asynchrische asynchrone Eigenschaft des Skript -Tags für HTML5. In der Vergangenheit haben wir dazu verschiedene JavaScript -Tricks verwendet, aber jetzt machen es neue Eigenschaften relativ einfach, das Blockieren zu verhindern.
Async - HTML -Attribute
Wie ich bereits erwähnt habe, ist das Hinzufügen des asynchronen Attributs sehr einfach:
<!-Async und Onload Callback->
<script async src = "sitescript.js"> </script>
Wenn Ihr JavaScript- und HTML -Strukturdesign vernünftig ist, können Ihre Skriptelemente asynchron geladen werden.
Aufhebung - HTML -Attribute
Der Safari -Browser fügt ein zusätzliches Defer -Attribut hinzu
<!-Scheinspenden, der Effekt ist ähnlich wie asynchron->
<script defer src = "sitescript.js"> </script>
Der Unterschied zwischen Asynchronisation und Verschiebung
Das offizielle Blog des Webkit -Blogs erklärt den Unterschied zwischen Async und Aufschub
------------------------------------
Unter normalen Umständen wird der Analyseprozess unter normalen Umständen bei der Analyse der HTML -Quelldatei auf ein externes Skript trifft und eine Anfrage zum Herunterladen der Skriptdatei gesendet. DOM Parsing wird weiterhin durchgeführt, nachdem das Skript vollständig heruntergeladen und ausgeführt wurde. Zum Beispiel:
<script src = myblockscript.js> </script>
Während des Downloadprozesses wird der Browser von anderen nützlichen Aufgaben aus erledigt, einschließlich der Parsen von HTML, der Ausführung anderer Skripte und der Anzeige des CSS -Layouts. Obwohl Webkit -Vorspannungsscanner während der Download -Phase Multithreading erkennen können, gibt es für einige Seiten immer noch eine große Netzwerkverzögerung.
Es gibt viele Techniken zur Verbesserung der Seitenanzeigegeschwindigkeit, aber alle erfordern zusätzliche Code- und Browser-spezifische Fähigkeiten. Jetzt kann das Skript keine Skripte synchron ausführen müssen, indem asynchronisierte oder aufschiebende Attribute hinzugefügt werden. Das Beispiel lautet wie folgt:
<script async src = "myasyncscript.js"> </script>
<script defer src = "mydeferscript.js"> </script>
Weder Async noch Defer Annotation Skript werden sofort heruntergeladen, ohne die HTML -Parsen zu behaupten. Beide unterstützen Onload -Ereignisrückrufe, um die Initialisierung zu lösen, für die das Skript ausgeführt werden muss.
Der Unterschied zwischen den beiden ist der Unterschied in der Ausführung:
Das asynchronisierte Skript wird unmittelbar nach dem Herunterladen der Skriptdatei ausgeführt und seine Ausführungszeit muss vor dem Ladeereignis des Fensters ausgelöst werden. Dies bedeutet, dass mehrere asynchronisierte Skripte wahrscheinlich nicht in der Reihenfolge ausgeführt werden, in der sie auf der Seite erscheinen.
Im Gegensatz dazu stellt der Browser sicher, dass in der Reihenfolge seines Auftretens auf der HTML -Seite mehrere Aufschaltskripte ausgeführt werden und dass die Ausführungszeit vor Abschluss der DOM -Auflösung und das Domcontent -Ereignis des Dokuments abgefeuert wird.
Das Folgende ist ein Beispiel für den Download von 1 Sekunde und 1 Sekunde, um andere Operationen zu analysieren. Wir können sehen, dass das Laden der gesamten Seite ungefähr 2 Sekunden dauerte.
Das gleiche Beispiel, aber diesmal haben wir das Defer -Attribut des Skripts angegeben. Denn beim Herunterladen des Aufhebungsskripts können andere Vorgänge parallel ausgeführt werden, sodass es ungefähr 1 -mal schneller ist.
------------------------------------
Welche Browser unterstützen Async und Defer
Auch in dem oben genannten Artikel erwähnt:
Zusätzlich zur neuen Version des Browsers basierend auf Webkit hat Firefox die Schein- und Onload -Eigenschaften seit langem unterstützt und das asynchronisierte Attribut seit FF3.6 hinzugefügt. IE unterstützt auch das Defer -Attribut, unterstützt aber das asynchriearige Attribut nicht. Ab IE9 wird auch das Onload -Attribut unterstützt.
Aynsc ist großartig!
Ich war so froh, dass das Webkit Async implementiert. Das Blockieren ist ein großer Leistungs Engpass für jede Website, und die direkte Angabe von Skriptdateien asynchrones Laden beschleunigen die Webseiten zweifellos.