defer en async bepalen wanneer een externe <script> wordt gedownload en uitgevoerd ten opzichte van HTML-parsing. Beide stellen de script in staat om parallel te downloaden zonder de parser te blokkeren — het verschil zit in het uitvoeringstijdstip.
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 | |
|---|---|---|
| Downloaden | parallel | parallel |
| Uitvoering | zodra gedownload | nadat HTML volledig is geparsed |
| Volgorde behouden? | Nee (wie het eerst klaar is) | Ja (documentvolgorde) |
| Parser blokkeren? | alleen kort tijdens uitvoering | nooit |
defer — voor scripts die het DOM raken of afhankelijk van elkaar/volgorde zijn (uw app-code). Ze worden na het bestaan van het DOM uitgevoerd, in volgorde, net voor DOMContentLoaded.async — voor onafhankelijke scripts van derden die niet afhankelijk zijn van het DOM of andere scripts (analytics, advertenties). Volgorde doet er niet toe, voer ze ASAP uit.<script src="analytics.js" async></script> <!-- independent → async -->
<script src="app.js" defer></script> <!-- app logic, ordered → defer -->
Opmerking: beide zijn alleen van toepassing op externe scripts (src); ze worden genegeerd op inline scripts. ES-modules (type="module") worden standaard uitgesteld.
defer/async gebruiken houdt scripts tegen van het blokkeren van HTML-parsing, wat rechtstreeks de laadprestaties en First Contentful Paint verbetert.
De juiste keuze maken (defer voor geordende DOM-afhankelijke app-code, async voor fire-and-forget scripts van derden) voorkomt zowel trage laadtijden als order-afhankelijkheidsproblemen.