Bearbeiten von „HTML“

== 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. <ref>https://www.mindtwo.de/blog/quicktip-html5-async-defer-script-attribute</ref>

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

<big>'''Was hat sich geändert?'''</big>

Während ein Browser eine Webseite lädt, parst er gleichzeitig den HTML-Code und sucht nach Inhalten. Wenn ein <code>script</code>-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 <code>async</code> und <code>defer</code> 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.

<pre>
<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 -->
</pre>

<big>'''Async und Defer im Detail'''</big>

Bei Verwendung des <code>async</code> 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 <code>async</code> Skripten.

Im Gegensatz dazu lädt das <code>defer</code> 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 <code>DOMContentLoaded</code>-Ereignisses. Wenn mehrere <code>defer</code> Skripte auf einer Seite vorhanden sind, werden sie in der Reihenfolge ihrer Erscheinung im HTML-Code ausgeführt.

<big>'''Neues Browserverhalten'''</big>

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

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

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

<big>'''Fazit'''</big>

Die <code>async</code> und <code>defer</code> 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 <code>async</code> und <code>defer</code> 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!

----
'''Quellen:'''