HTML async-Attribut
Das async-Attribut ist ein boolean-Attribut und gibt an, dass das Skript asynchron ausgeführt wird. Erfahren Sie, bei welchem Element es verwendet werden kann.
Das async-Attribut ist ein boolean-Attribut, das beim <script>-Element verwendet wird. Es weist den Browser an, ein externes Skript herunterzuladen, ohne das HTML-Parsing zu unterbrechen, und das Skript auszuführen, sobald der Download abgeschlossen ist.
Es funktioniert nur bei externen Skripten und muss daher mit dem src-Attribut kombiniert werden. Das Hinzufügen von async zu einem Inline-Skript (einem Skript, bei dem JavaScript direkt zwischen den Tags steht) hat keine Wirkung — der Browser ignoriert es.
Warum async wichtig ist
Normalerweise hält der Browser an, wenn er auf einen einfachen <script src="...">-Tag trifft: Er stoppt das Parsen des HTML, lädt die Datei herunter, führt sie aus und fährt erst dann mit dem Aufbau der Seite fort. Bei einer langsamen Verbindung blockiert dies das Rendern und lässt die Seite träge wirken.
async entfernt den Download aus dem kritischen Pfad: Der Browser setzt das Parsen und den Aufbau der Seite fort, während das Skript im Hintergrund abgerufen wird. Das Ergebnis ist ein schnelleres, nicht-blockierendes Laden von Skripten.
async vs. defer vs. keines von beiden
Ein externes Skript kann auf drei Arten geladen werden. Der Unterschied liegt darin, wann es heruntergeladen und wann es relativ zum HTML-Parsing ausgeführt wird.
| Verhalten | Download | Ausführung | Reihenfolge eingehalten? |
|---|---|---|---|
| Keines (Standard) | Blockiert das Parsen | Sofort, bevor das Parsen fortgesetzt wird | Ja |
async | Parallel, ohne Blockierung | Sobald die Datei bereit ist (kann das Parsen unterbrechen) | Nein |
defer | Parallel, ohne Blockierung | Nach Abschluss des Parsens, vor DOMContentLoaded | Ja |
<!-- Blocks parsing until downloaded and run -->
<script src="example.js"></script>
<!-- Downloads in parallel, runs the moment it arrives -->
<script src="example.js" async></script>
<!-- Downloads in parallel, runs after the HTML is fully parsed -->
<script src="example.js" defer></script>Wichtige Punkte:
- Verwenden Sie
asyncfür unabhängige Skripte, die weder von der Seite noch von anderen Skripten abhängen (Analytics, Ad-Tags, Tracker). - Verwenden Sie
defer, wenn das Skript das vollständige DOM benötigt oder wenn mehrere Skripte in einer festen Reihenfolge ausgeführt werden müssen. - Ein
<script type="module">ist standardmäßig deferred, daher fügt man keindeferhinzu; das Hinzufügen vonasynczu einem Modul bewirkt, dass es ausgeführt wird, sobald es geladen ist.
Die Reihenfolge ist bei async nicht garantiert
Bei async werden Skripte in der Reihenfolge ausgeführt, in der ihr Download abgeschlossen ist — nicht in der Reihenfolge, in der sie im HTML erscheinen. Das bricht jedes Skript, das von einem anderen abhängt.
<!-- BAD: jquery.js may finish AFTER app.js, so $ is undefined when app.js runs -->
<script src="jquery.js" async></script>
<script src="app.js" async></script>Wenn das zweite Skript vom ersten abhängt, verwenden Sie stattdessen defer — zurückgestellte Skripte werden stets von oben nach unten ausgeführt:
<!-- GOOD: jquery.js is guaranteed to run before app.js -->
<script src="jquery.js" defer></script>
<script src="app.js" defer></script>Syntax
<script src="example.js" async></script>Beispiel für das HTML async-Attribut
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<script src="example.js" async></script>
<noscript>Sorry, your browser does not support JavaScript!</noscript>
</head>
<body>
<h1>Example</h1>
<p>
A browser that doesn’t support JavaScript will display the content inside the noscript element.
</p>
<script>
document.write("My first JavaScript example!")
</script>
</body>
</html>