Verwenden Sie das async-Attribut, um JavaScript-Methoden asynchron zu laden und auszuführen

Einer der größten Gründe, warum ich von HTML5 begeistert bin, ist, dass die darin implementierten neuen Funktionen und Features alles sind, worauf wir uns schon lange gefreut haben. Ich habe zum Beispiel schon früher Platzhalter verwendet, musste diese aber in JavaScript implementieren. Das für JavaScript-Tags in HTML5 bereitgestellte async-Attribut ermöglicht das asynchrone Laden und Ausführen von JavaScript. Früher benötigte ich verschiedene JavaScript-Plugins, um diese Funktionalität zu erreichen, aber jetzt ermöglicht uns dieses neue Attribut die einfache Implementierung des asynchronen Ladens.

asynchron – HTML-Code

Es ist ganz einfach, so:

<script async src="siteScript.js" onload="myInit()"></script>

Tatsächlich sollten Sie, wenn Sie ein ernsthafter Programmierer sind, mehr als 90 % von SCRIPT Tags verwenden das Attribut async.

defer – HTML-Code

hat auch ein async-Attribut, das dem defer-Attribut ähnelt:

<script defer src="siteScript.js" onload="myInit()"></script>

ist in der Syntax dem async-Attribut sehr ähnlich.

async & defer – Unterschiede

Dieser WebKit-Blog erklärt die Unterschiede zwischen defer und async之间 sehr deutlich:

Ansicht Der Prozessor wird geladen und analysiert Skripte, die mit dem Attribut async oder defer gekennzeichnet sind, sofort und unterstützen auch das Onload-Ereignis, das für die Initialisierung auf dieses Skript angewiesen ist. Der Unterschied zwischen dem Attribut async und dem Attribut defer besteht darin, wann das Skript ausgeführt wird. Mit dem Attribut async gekennzeichnete Skripte werden nach Abschluss des Downloads ausgeführt, ohne auf das Ladeereignis des Fensters zu warten. Dies bedeutet, dass mit dem Attribut async gekennzeichnete Skripte nicht unbedingt in der Reihenfolge ausgeführt werden, in der sie in die Seite eingebettet sind. Mit dem Attribut defer gekennzeichnete Skripte werden auf jeden Fall in der Reihenfolge ausgeführt, in der sie auf der Seite erscheinen. Die Ausführung beginnt, nachdem die Analyse vollständig abgeschlossen ist, jedoch vor dem DOMContentLoaded-Ereignis des Dokuments.

Welche Browser unterstützen asynchrone und verzögerte Attribute?

Zitat aus dem Safari-Blog:

WebKit-Engine-Browser (Google Chrome und Safari). Firefox unterstützt die Attribute async und defer ab Version 3.6. IE unterstützt seit langem auch das Defer-Attribut, unterstützt jedoch nicht das Async-Attribut. Das Onload-Attribut wird in IE9 unterstützt.

async ist so nützlich!

Es freut mich sehr, dass Browser die async-Funktion implementieren. Es ist in der Tat ein großes Problem, beim Durchsuchen der Website-Seite an JavaScript hängen zu bleiben. Die asynchronen Lade- und Ausführungsfunktionen des async-Attributs erhöhen definitiv die Seitengeschwindigkeit der Website.

Empfohlenes Tutorial: „Javascript-Grundlagen-Tutorial“

Das obige ist der detaillierte Inhalt vonVerwenden Sie das async-Attribut, um JavaScript-Methoden asynchron zu laden und auszuführen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!