Quicktip: HTML5 async & defer Script Attribute

HTML5 async and defer script attribute

Das Laden und Darstellen einer komplexen HTML-Seite mit JavaScript wird oft durch zu vorsichtige Annahmen über die nötige Reihenfolge der Abarbeitung ausgebremst. Die HTML5-Attribute „async“ und „defer“ schaffen hier Abhilfe.

Während eine HTML-Seite geladen wird, wird sie gleichzeitig auf ihre Inhalte untersucht („geparst“). Stößt der Browser dabei auf ein „script“-Tag, geht er davon aus, dass das darin eingebettete oder in einer separaten Datei abgelegte Skript zunächst ausgeführt (und damit zuvor geladen und geparst) werden muss.

Erst dann fährt der Browser mit der Verarbeitung des HTML-Codes und eventueller weiterer Skripten fort. Bei einer entsprechend aufwändig programmierten Seite kann das die Darstellung des Inhalts merklich verzögern, obwohl das (abhängig vom Zweck des Skripts) eventuell gar nicht nötig wäre.

Die Attribute „async“ und „defer“ in Kombination mit dem Attribut „onload“ (falls erforderlich) im „script“-Tag teilen dem Browser mit, dass er ein mit „src“-Attribut referenziertes Skript zu einem günstigeren Zeitpunkt ausführen kann. Für eingebetteten JavaScript-Code sind die Attribute nicht zulässig.

Mit diesem Code wird die „script.js“ Datei zu einem nicht näher bestimmten Zeitpunkt geladen und ausgeführt, ebenso wie der im „onload“-Attribut (falls angegeben) enthaltene Code. Garantiert ist nur, dass dieser Zeitpunkt vor dem „load“-Ereignis des „window“-Objekts liegt. Es ist nicht festgelegt, in welcher Reihenfolge mehrere mit „async“ gekennzeichnete Skripte verarbeitet werden. Wer etwas mehr Kontrolle braucht, für den ist „defer“ gedacht. Bei „defer“ beginnt die Ausführung, nachdem die HTML-Seite vollständig verarbeitet und bevor das „DOMContentLoaded“-Ereignis des „document“ ausgelöst wurde. Es ist dabei auch garantiert, dass alle mit „defer“ gekennzeichneten Skripte in der Reihenfolge ausgeführt werden, in der sie im HTML-Code auftauchen.

Damit verbindet „defer“ den Vorteil einer weitgehenden Kontrolle mit der Möglichkeit, das „script“-Tag nahe dem Anfang der HTML-Datei zu platzieren und somit das Laden des Skripts frühzeitig zu beginnen und häufig parallel zu der Verarbeitung des HTML-Codes ablaufen zu lassen.

Zur Kompatibilität mit Browsern, die „async“ nicht unterstützen, z. B. Internet Explorer 9 oder Firefox vor 3.6, können beide Attribute gleichzeitig angegeben werden. In diesem Fall hat „async“ Vorrang, sofern der Browser es versteht, ansonsten gilt „defer“.

Um XHTML-kompatiblen Code zu erstellen, müssen die Attribute als (async=“async“) bzw. (defer=“defer“) geschrieben werden.