Asynchrone Skriptausführung

Das async-Attribut für das script-Element ermöglicht das Laden des zugeordneten Skripts und das asynchrone Ausführen unter Berücksichtigung des Rests der Seite. Das Skript wird also im Hintergrund geladen und ausgeführt, während die Seite weiter analysiert wird. Bei Seiten mit bearbeitungsintensiven Skripts kann das async-Attribut den Ladevorgang der Seite erheblich verlängern.

Das async-Attribut.

Das async-Attribut ist Teil der HTML5-Spezifikation des World Wide Web Consortium (W3C) und für Situationen vorgesehen, in denen keine Abhängigkeiten von einem Skript bestehen, das Skript aber dennoch möglichst bald ausgeführt werden muss. Beachten Sie im folgenden hypothetischen Beispiel, dass ein Skript ohne das async-Attribut (oder defer) das Laden anderer Seiteninhalte blockieren könnte.

Lilah besitzt einen persönlichen Blog, für den sie eine Reihe von skriptbasierten Widgets verwendet. Diese Widgets sollen den Blog attraktiver für Besucher machen. Die Seite ist jedoch auch ohne diese Skripts voll funktionsfähig (sie möchte auch Benutzer unterstützen, die Skripts deaktiviert haben). Aktuell lädt sie alle Widgets zu Beginn ihrer HTML-Datei, sie hat aber einige Beschwerden darüber erhalten, dass das Laden ihrer Seite aufgrund der langen Ausführungszeiten der Skripts zu lange dauert. Sie hat versucht, die Skriptausführung an das Ende der Seite zu verlagern, um das Laden zu beschleunigen, aber die Seite enthält so viele Inhalte, dass die umfassende Website mit dieser Änderung nicht schnell genug ausgeführt wird. Sie möchte eigentlich, dass die Widgets so schnell wie möglich geladen werden, ohne dass davon der Rest der Seite blockiert wird. Nach einer kurzen Suche stellt sie fest, dass das async-Attribute in HTML5 genau das ist, was sie braucht. Indem sie alle ihre Skripts in eine externe Datei auslagert, hat sie schnell ihre Seite überarbeitet und damit eine gute Balance zwischen Leistung und skriptbasierten Erweiterungen gefunden.


<head>
  <title>Lilah's Blog</title>
  <script async src="widgets.js"></script>
</head>


Einzelheiten zur Implementierung

Internet Explorer 10 und Windows Store-Apps mit JavaScript unterstützen die Attribute async und defer für das script-Element (das defer-Attribut wird in früheren Versionen von Windows Internet Explorer unterstützt). Das async- und das defer-Attribut können nur verwendet werden, wenn das src-Attribut vorhanden ist. Folgende vier Kombinationen sind möglich.

VerwendungBeschreibung

<script src="widgets.js"></script>

Das Skript wird sofort ausgeführt, und die Seite wartet bis zum Abschluss der Skriptausführung, bevor die Analyse fortgesetzt wird. Dies kann die Leistung beim Laden der Seite erheblich reduzieren.

<script async src="widgets.js"></script>

Das Skript wird asynchron heruntergeladen, während die Seite weiter analysiert. Das Skript wird nach Abschluss des Downloads ausgeführt.

<script defer src="widgets.js"></script>

Das Skript wird ausgeführt, wenn die Seite die Analyse abgeschlossen hat.

<script async defer src="widgets.js"></script>

Das async-Attribute wird berücksichtigt, während das defer-Attribute ignoriert wird. Dadurch können Entwickler async in Browsern verwenden, die dieses Attribut unterstützen, aber auf defer zurückgreift, wenn der Browser async nicht unterstützt.

 

Zusammengefasst kann man sagen, dass Webentwickler mit async die Seitenladezeiten mit minimalem Aufwand verbessern können. Es verringert außerdem die Anzahl der benötigten browserspezifischen Problemumgehungen für Skriptladebibliotheken.

API-Referenz

async
defer

Demos für die Internet Explorer-Testversion

HTML5 Async Scripts

IEBlog-Beiträge

Asynchrone Programmierung in JavaScript mit Zusagen

Spezifikation

HTML5: Abschnitt 4.3.1

 

 

Anzeigen:
© 2014 Microsoft