image" data-width="6912" data-height="3456" data-content="1*xMgA6sYhX6YUnEkyr_wDzg.png">

Async e defer sono gli attributi (facoltativi) del tradizionale tag <script> in HTML.

<head>
<!-- other head things -->
  <script async src="">
  <script defer src="">
<head/>

Cancellare le basi!

Il tag script in HTML viene utilizzato per incorporare un file JavaScript esterno. Può anche contenere istruzioni di scripting se non punta a nessun file js.
Generalmente utilizzato poco prima della fine del tag body. Può essere posizionato anche all'interno della testa. Il posizionamento in testa o prima dell'estremità del corpo svolge diverse funzioni.
Quando si carica una pagina Web, all'interno del browser accadono 2 cose importanti: l'analisi HTML e il caricamento degli script.
Il caricamento degli script comprende il download degli script dal server e la parte di esecuzione.

Scarica i file di script in background mentre è in corso l'analisi HTML.
Dopo il download, mette in pausa l'analisi HTML ed esegue lo script. Una volta completata l'esecuzione, ha luogo l'analisi rimanente.
I file di script vengono eseguiti in nessun ordine.
Elimina l'effetto di blocco del rendering di JS durante il download (non interrompe/mette in pausa l'analisi HTML).

Scarica i file di script in background mentre è in corso l'analisi HTML.
Non mette in pausa l'analisi HTML anche dopo il download e viene eseguito dopo che l'analisi HTML è stata completata.
I file di script vengono eseguiti in ordine.
Elimina l'effetto di blocco del rendering di JS durante il download (non interrompe/mette in pausa l'analisi HTML).
Simile al tag di script convenzionale nel corpo, ma l'uso di defer gli consente di spostarsi in testa con conseguente caricamento anticipato degli script successivi.

Nota: non utilizzare sia 'async' che 'defer' sullo stesso script in quanto potrebbe causare un comportamento indesiderato su più browser.

immagine per gentile concessione: Stack Overflow

Cosa usare quando?

Asincrono:

Meglio per le risorse ad alta priorità che improvvisano il caricamento anticipato della pagina poiché l'esecuzione viene eseguita subito dopo il download degli script.
Dovrebbe essere utilizzato per file indipendenti importanti che non sono interconnessi con altri script e aiutano nel caricamento anticipato.

Può essere utilizzato per le risorse che non sono importanti e sono per un uso successivo. Questo perché l'esecuzione degli script posticipati avviene all'ultimo momento dopo che l'HTML è stato completamente analizzato.

Connettiti con me su: LinkedIn , GitHub