WebKit Native Asynchronous Script Loading

Avatar of Chris Coyier
Chris Coyier am

DigitalOcean bietet Cloud-Produkte für jede Phase Ihrer Reise. Starten Sie mit 200 $ kostenlosem Guthaben!

WebKit Nightly-Builds unterstützen dies jetzt. Die Syntax sieht wie folgt aus

<script async src="myAsyncScript.js" onload="myInit()"></script>
<script defer src="myDeferScript.js" onload="myInit()"></script>

Sowohl async als auch defer Skripte beginnen sofort mit dem Download, ohne den Parser zu unterbrechen, und beide unterstützen einen optionalen onload-Handler, um den häufigen Bedarf an Initialisierungen zu decken, die vom Skript abhängen. Der Unterschied zwischen async und defer liegt darin, wann das Skript ausgeführt wird. Jedes async Skript wird bei der ersten Gelegenheit ausgeführt, nachdem der Download abgeschlossen ist, und vor dem load-Ereignis des Fensters. Das bedeutet, es ist möglich (und wahrscheinlich), dass async Skripte nicht in der Reihenfolge ausgeführt werden, in der sie auf der Seite erscheinen. Die defer Skripte hingegen werden garantiert in der Reihenfolge ausgeführt, in der sie auf der Seite erscheinen. Die Ausführung beginnt, nachdem das Parsen vollständig abgeschlossen ist, aber vor dem DOMContentLoaded-Ereignis des Dokuments.

Früher wurde dies mit der cleveren Technik gemacht, ein neues Skriptelement in JavaScript zu erstellen und es nach dem Laden der Seite in den Head einzufügen. Das ist einfacher und sauberer. Hoffen wir, dass andere Browserhersteller dies ebenfalls aufgreifen, und zwar mit der gleichen Syntax.

Direkter Link →