Mit HTML5 erhalten wir zwei neue boolesche Attribute für das <script>-Tag: async und defer. Async erlaubt die asynchrone Ausführung von Skripten und defer erlaubt die Ausführung erst, nachdem das gesamte Dokument geparst wurde.
Diese beiden Attribute sind ein Muss, um die Geschwindigkeit und Leistung von Websites zu erhöhen. Sie ermöglichen die Beseitigung von Rendering-Blocking-JavaScript, bei dem die Seite Skripte laden und ausführen müsste, bevor sie mit dem Rendern der Seite fertig ist. Hier ein Anwendungsbeispiel:
<script defer src="https://www.digitalocean.com/js/jquery.min.js"></script>Async vs Defer
Bei async wird die Datei asynchron heruntergeladen und dann ausgeführt, sobald sie heruntergeladen ist.
Bei defer wird die Datei asynchron heruntergeladen, aber erst ausgeführt, wenn das Parsen des Dokuments abgeschlossen ist. Mit defer werden Skripte in der gleichen Reihenfolge ausgeführt, in der sie aufgerufen werden. Daher ist Aufschieben das Attribut der Wahl, wenn ein Skript von einem anderen Skript abhängt. Wenn Sie beispielsweise jQuery sowie andere Skripte verwenden, die davon abhängen, würden Sie defer für diese Skripte (einschließlich jQuery) verwenden und sicherstellen, dass Sie jQuery vor den abhängigen Skripten aufrufen.
Eine gute Strategie ist es, async zu verwenden, wenn es möglich ist, und dann zu verschieben, wenn async keine Option ist.
👉Beachten Sie, dass beide Attribute keine Auswirkungen auf Inline-Skripte haben.
Browser Support
Kann ich script-async verwenden? Daten zur Unterstützung der Script-Async-Funktion in den wichtigsten Browsern von caniuse.com.