defer und async ändern wann ein externes <script> heruntergeladen und ausgeführt wird, relativ zum HTML-Parsing. Beide ermöglichen das parallele Herunterladen des Scripts ohne den Parser zu blockieren — der Unterschied liegt im Ausführungszeitpunkt.
Normal: parse──stop──[download+exec]──parse──────── (slowest)
async: parse──────────────────exec──parse──────── (runs whenever it arrives)
defer: parse───────────────────────────parse──exec (after parsing, before DOMContentLoaded)
async | defer | |
|---|---|---|
| Download | parallel | parallel |
| Ausführung | sobald heruntergeladen | nach vollständigem HTML-Parsing |
| Reihenfolge beibehalten? | Nein (wer zuerst fertig ist) | Ja (Dokumentreihenfolge) |
| Parser blockieren? | nur kurz während Ausführung | nie |
defer — für Scripts, die das DOM anfassen oder voneinander/von der Reihenfolge abhängen (dein App-Code). Sie laufen nach dem Parsing des DOM, in Reihenfolge, kurz vor DOMContentLoaded.async — für unabhängige Third-Party-Scripts, die nicht vom DOM oder anderen Scripts abhängen (Analytics, Werbung). Reihenfolge ist egal, führe sie ASAP aus.<script src="analytics.js" async></script> <!-- independent → async -->
<script src="app.js" defer></script> <!-- app logic, ordered → defer -->
Hinweis: beide gelten nur für externe Scripts (src); sie werden bei Inline-Scripts ignoriert. ES-Module (type="module") sind standardmäßig deferred.
Die Nutzung von defer/async verhindert, dass Scripts das HTML-Parsing blockieren, was direkt die Last-Performance und First Contentful Paint verbessert.
Die richtige Wahl zu treffen (defer für geordnete DOM-abhängige App-Code, async für feuer-und-vergessen Third-Party-Scripts) vermeidet sowohl langsame Ladevorgänge als auch Bugs durch Reihenfolgeabhängigkeiten.