Attributo async in HTML
L'attributo async è un attributo boolean e specifica che lo script verrà eseguito in modo asincrono. Scopri su quale elemento può essere utilizzato.
L'attributo async è un attributo boolean usato sull'elemento <script>. Indica al browser di scaricare uno script esterno senza interrompere il parsing dell'HTML, e di eseguire quello script non appena il download è completato.
Funziona solo per gli script esterni, quindi deve essere abbinato all'attributo src. Aggiungere async a uno script inline (con il codice JavaScript scritto direttamente tra i tag) non ha alcun effetto — il browser lo ignora.
Perché async è importante
Normalmente, quando il browser incontra un normale tag <script src="...">, interrompe il parsing dell'HTML, scarica il file, lo esegue e solo allora continua a costruire la pagina. Su una connessione lenta questo blocca il rendering e fa sembrare la pagina lenta.
async rimuove il download dal percorso critico: il browser continua a fare il parsing e a costruire la pagina mentre lo script viene recuperato in background. Il risultato è un caricamento degli script più veloce e non bloccante.
async vs defer vs nessuno dei due
Uno script esterno può essere caricato in tre modi. La differenza sta in quando viene scaricato e quando viene eseguito rispetto al parsing dell'HTML.
| Comportamento | Download | Esecuzione | Ordine preservato? |
|---|---|---|---|
| Nessuno (default) | Blocca il parsing | Immediatamente, prima che il parsing continui | Sì |
async | In parallelo, senza bloccare | Non appena il file è pronto (può interrompere il parsing) | No |
defer | In parallelo, senza bloccare | Dopo il completamento del parsing, prima del DOMContentLoaded | Sì |
<!-- Blocks parsing until downloaded and run -->
<script src="example.js"></script>
<!-- Downloads in parallel, runs the moment it arrives -->
<script src="example.js" async></script>
<!-- Downloads in parallel, runs after the HTML is fully parsed -->
<script src="example.js" defer></script>Punti chiave:
- Usa
asyncper script indipendenti che non dipendono dalla pagina né da altri script (analytics, tag pubblicitari, tracker). - Usa
deferquando lo script necessita del DOM completo, oppure quando più script devono essere eseguiti in un ordine fisso. - Un
<script type="module">è differito per default, quindi non è necessario aggiungeredefer; aggiungereasynca un modulo fa sì che venga eseguito non appena viene caricato.
L'ordine non è garantito con async
Con async, gli script vengono eseguiti nell'ordine in cui terminano il download — non nell'ordine in cui compaiono nell'HTML. Questo rompe qualsiasi script che dipende da un altro.
<!-- BAD: jquery.js may finish AFTER app.js, so $ is undefined when app.js runs -->
<script src="jquery.js" async></script>
<script src="app.js" async></script>Se il secondo script dipende dal primo, usa defer al suo posto — gli script differiti vengono sempre eseguiti dall'alto verso il basso:
<!-- GOOD: jquery.js is guaranteed to run before app.js -->
<script src="jquery.js" defer></script>
<script src="app.js" defer></script>Sintassi
<script src="example.js" async></script>Esempio dell'attributo async in HTML
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<script src="example.js" async></script>
<noscript>Sorry, your browser does not support JavaScript!</noscript>
</head>
<body>
<h1>Example</h1>
<p>
A browser that doesn’t support JavaScript will display the content inside the noscript element.
</p>
<script>
document.write("My first JavaScript example!")
</script>
</body>
</html>