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 aufwendig 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.
<script src="file.js"></script> <!-- HTML parsing is paused during fetch and execution -->
<script src="file.js" async></script> <!-- HTML parsing is paused during execution -->
<script src="file.js" defer></script> <!-- Script execution is done after parsing is finished -->
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.
