Quicktip: HTML5 async und defer Script Attribute

Es war einmal, vor langer Zeit, dass JavaScript nur in einer sequenziellen Reihenfolge in Webseiten integriert wurde. Die Ladezeit und die Darstellung von Webseiten waren oft eingeschränkt durch die Notwendigkeit, Skripte in einer bestimmten Reihenfolge abzuarbeiten. Aber mit HTML5 haben sich die Dinge verändert.

HTML5 führte zwei leistungsstarke Attribute ein, async und defer, die diese Beschränkungen aufheben und eine optimierte, schnellere und effizientere Skriptverarbeitung ermöglichen.

Was hat sich geändert?

Während ein Browser eine Webseite lädt, parst er gleichzeitig den HTML-Code und sucht nach Inhalten. Wenn ein script-Tag entdeckt wird, geht der Browser davon aus, dass das Skript, ob eingebettet oder aus einer externen Quelle, zuerst ausgeführt werden muss. Dies kann die Verarbeitung des restlichen HTML-Codes und aller folgenden Skripte stoppen, was wiederum die Darstellung der Webseite verzögert. Dies ist insbesondere bei komplex programmierten Webseiten ein Problem.

Um diesem Dilemma entgegenzuwirken, wurden die async und defer Attribute eingeführt. Sie erlauben dem Browser, die Ausführung von Skripten auf einen günstigeren Zeitpunkt zu verschieben und damit das Laden und die Darstellung der Webseite zu beschleunigen.

<script src="file.js"></script>        <!-- HTML-Parsing pausiert während des Ladens und der Ausführung -->
<script src="file.js" async></script>  <!-- HTML-Parsing pausiert während der Ausführung -->
<script src="file.js" defer></script>  <!-- Skriptausführung erfolgt nach Abschluss des Parsings -->

Async und Defer im Detail

Bei Verwendung des async Attributes wird das zugehörige Skript parallel zum HTML-Parsing geladen. Sobald das Skript vollständig geladen ist, wird das Parsing pausiert, um das Skript auszuführen. Es gibt keine Garantie für die Reihenfolge der Ausführung bei mehreren async Skripten.

Im Gegensatz dazu lädt das defer Attribut das Skript parallel zum HTML-Parsing, führt es aber erst aus, nachdem das vollständige HTML-Dokument geparst wurde und kurz vor dem Auslösen des DOMContentLoaded-Ereignisses. Wenn mehrere defer Skripte auf einer Seite vorhanden sind, werden sie in der Reihenfolge ihrer Erscheinung im HTML-Code ausgeführt.

Neues Browserverhalten

Die meisten modernen Browser unterstützen die async und defer Attribute. Jedoch sind nicht alle älteren Browser kompatibel. Zum Beispiel unterstützen der Internet Explorer 9 und Firefox vor 3.6 das async Attribut nicht.

In solchen Fällen können beide Attribute gleichzeitig verwendet werden. Wenn der Browser async unterstützt, hat dies Vorrang, ansonsten greift defer.

Um XHTML-kompatiblen Code zu erstellen, sollten die Attribute als async="async" bzw. defer="defer" geschrieben werden.

Fazit

Die async und defer Attribute von HTML5 sind leistungsstarke Werkzeuge, die es Webentwicklern ermöglichen, die Lade- und Darstellungszeit von Webseiten zu optimieren. Durch das Verständnis und die richtige Anwendung dieser Attribute können Sie die Benutzererfahrung Ihrer Webanwendungen erheblich verbessern.

Heute, in unserer modernen digitalen Welt, sollte das Ziel jedes Webentwicklers sein, eine schnell ladende, reaktionsfähige und benutzerfreundliche Webseite zu erstellen. Die async und defer Attribute sind ein Schritt in diese Richtung.

Egal, ob Sie ein alter Hase in der Webentwicklung sind oder gerade erst anfangen, es ist nie zu spät, die neuesten Tools und Techniken zu lernen und zu beherrschen. Tauchen Sie ein in die faszinierende Welt von HTML5 und entdecken Sie die unglaubliche Kraft, die in Ihren Händen liegt!