Gli attributi async e defer
Caricare gli script senza bloccare l’analisi dell’HTML
Gli attributi async e defer è una lezione HTML Academy gratuita su CoddyKit. Questa è la lezione 1 di 4. Puoi leggere la lezione completa qui gratuitamente — poi esercitati direttamente nel browser con un editor di codice integrato e un tutor IA disponibile 24/7. Fa parte del percorso di apprendimento HTML Academy, e i tuoi progressi si sincronizzano tra il web e l'app CoddyKit. Il corso HTML Academy include 4 lezioni in totale.
Comportamento predefinito degli script
Un semplice <script src="..."> privo di async o defer blocca l'analisi dell'HTML durante il download e l'esecuzione. Il rendering di tutto ciò che segue lo script viene sospeso, motivo per cui tradizionalmente gli script venivano inseriti alla fine di <body>.
async scarica in parallelo
<script async src="..."> scarica lo script in parallelo con l'analisi dell'HTML e lo esegue non appena arriva. L'esecuzione sospende comunque l'analisi dell'HTML, ma solo brevemente: lo script non blocca il download delle altre risorse.
async: ordine di esecuzione imprevedibile
Due script async vengono eseguiti nell'ordine in cui terminano per primi il download. Non utilizzi mai async per script che dipendono l'uno dall'altro (jQuery prima del plugin jQuery), perché la dipendenza potrebbe essere eseguita prima che il prerequisito sia disponibile.
defer attende l'HTML
<script defer src="..."> scarica lo script in parallelo come async, ma ne ritarda l'esecuzione fino al completamento dell'analisi dell'HTML, subito prima dell'evento DOMContentLoaded. Lo script non blocca mai l'analisi.
<script defer src="app.js"></script>
<script defer src="analytics.js"></script>defer preserva l'ordine
Più script defer vengono eseguiti nell'ordine in cui sono dichiarati, proprio come gli script normali alla fine di body. Questo rende defer la scelta corretta per gli script dipendenti: le utility vengono caricate prima dei consumer senza bisogno di un'orchestrazione manuale.
Scelta tra async e defer
Utilizzi async per snippet indipendenti di terze parti (analytics, annunci) che non modificano il DOM e non hanno dipendenze. Utilizzi defer per il codice della Sua applicazione che necessita del DOM e dipende da altri script.
I moduli sono differiti per impostazione predefinita
<script type="module"> si comporta automaticamente come defer: viene scaricato in parallelo, eseguito dopo l'analisi e mantiene l'ordine. Aggiungere defer a un modulo è consentito ma ridondante; aggiungere async ripristina il comportamento asincrono.
Gli script inline ignorano async/defer
async e defer si applicano solo agli script esterni (con src). Un tag <script> inline viene eseguito immediatamente indipendentemente dagli attributi, quindi gli attributi vengono ignorati silenziosamente per <script>console.log(1)</script>.
Il posizionamento è meno importante
Con defer (o con i moduli), i tag <script> possono trovarsi in <head> senza bloccare l'analisi; inoltre, inserirli lì consente al browser di individuarli e iniziare a scaricarli prima rispetto a quando si trovano in fondo a <body>.
<head>
<script defer src="app.js"></script>
</head>Combinazione con preload
Per gli script sensibili alla latenza, abbini <link rel="preload" as="script" href="..."> nell'head a uno script defer posizionato più avanti. Il preload avvia immediatamente il download, mentre defer garantisce il corretto ordine di esecuzione.
Errore comune
Contrassegnare uno script come async senza verificare che non abbia alcuna dipendenza è la causa più comune delle condizioni di gara del tipo "funziona sul mio computer, si rompe in produzione". In caso di dubbio, preferisca defer: è tollerante, mentre async non perdona.
Verifica delle conoscenze
Qual è la differenza tra async e defer per due script in cui il secondo dipende dal primo?
Riepilogo
async e defer scaricano entrambi gli script in parallelo con l'analisi dell'HTML. async esegue lo script appena arriva, in un ordine imprevedibile: lo utilizzi per snippet indipendenti di terze parti. defer esegue lo script dopo l'analisi, nell'ordine di dichiarazione: lo utilizzi per il codice dell'applicazione con dipendenze. I moduli adottano per impostazione predefinita il comportamento di defer.
Impara HTML con un tutor IA — gratis
Scrivi ed esegui vero codice nel tuo browser, ricevi aiuto istantaneo da un tutor IA disponibile 24/7, e riprendi da dove hai lasciato sul web o nell'app.
- Corsi
- 40
- Lezioni
- 159
Domande Frequenti
La lezione «Gli attributi async e defer» è gratuita?
Sì — il testo completo di «Gli attributi async e defer» è gratuito qui sul web. Per esercitarvi in modo interattivo (un editor di codice integrato e un tutor IA 24/7) e sbloccare il resto del corso HTML Academy, passa a CoddyKit PRO. Il corso HTML Academy include 4 lezioni in totale.
Cosa imparerò in «Gli attributi async e defer»?
Caricare gli script senza bloccare l’analisi dell’HTML Eserciti HTML Academy con codice pratico che esegui direttamente nel browser, e un tutor IA 24/7 risponde alle tue domande mentre lavori sulla lezione.
Ho bisogno di esperienza per iniziare HTML Academy?
Non è richiesta alcuna esperienza precedente. HTML Academy su CoddyKit è strutturato per principianti e studenti avanzati, quindi puoi iniziare da qui o dall'inizio e procedere al tuo ritmo. Questa è la lezione 1 di 4.
Quanto tempo richiede la lezione «Gli attributi async e defer»?
La maggior parte delle lezioni CoddyKit richiede circa 5–10 minuti. Ogni lezione è breve e interattiva, quindi fai progressi costanti e riprendi esattamente da dove hai lasciato su web e app.
Posso scrivere ed eseguire codice in questa lezione HTML Academy?
Sì. Ogni lezione HTML Academy include un editor di codice integrato, quindi scrivi ed esegui codice reale direttamente nel tuo browser e ricevi feedback istantaneo dall'IA — nessuna configurazione locale necessaria.
Tutte le lezioni di questo corso
- Gli attributi async e defer
- Preload, prefetch e preconnect
- Caricamento differito delle immagini: loading=lazy
- Resource hints: modulepreload