Async e defer

Ridurre i tempi di caricamento per JavaScript esterni con async e defer

La necessità di usare risorse come Javascript nelle pagine di un sito web, costituisce un blocco temporaneo nel caricamento, definito parser blocking. Il parser blocking, cosiste in una pausa sul carimento dell pagina e delle altre risorse, nel momento in cui il parser del browser incontra uno script durante la lettura del codice HTML. In tale situazione, tutte le operazioni di lettura e rendering sono sospese fino al termine di eseguzione del codice in cui riprendono.

Da ciò, si può facilmente comprendere come avere tra le risorse anche JavaScript esterni, i quali devono essere caricati prima di essere eseguiti, possa incremntare, tal volta anche notevolemente, le tempistiche di caricmento delle pagine. Per ridurre le pause del rendering dovute a Javascript, è possibile fare uso di vaire tecniche tra le quali l’impiego degli attributi HTML async e defer.

Il problema della pausa nel render ha origine in un comportamento intinseco del browser web. In alcuni casi, il può generare un rallentamento con il risultato di un sito lento che rende gli utenti frustrati. Per mezzo degli attributi async e defer, si può risolvere facilmente questo problema, rimuovendo o riducendo la pausa.

Uso dell'attributo async

L’attributo async consente di proseguire l'eseguzione del rendering dell’HTML durante lo scaricamento dello script, ovvero, viene eseguito in parallelo. Lo script quindi, viene eseguito al termine dello scaricamento, mentre il parsing della pagina resta in pausa solamente per il tempo dell'eseguzione del medesimo.

Non non si necessita che lo script sia disponibile subito disponibile, async si presemta come la scelta migliore rispetto a defer. E' consigliabile per script esterni pesati.

Uso dell'attributo defer

L’attributo defer a dfferenza di async, non pone mai in pauasa il rendering dell’HTML durante l'eseguzione dello script. Lo script infatti, viene eseguito al completameto del parsing della pagina HTML.

Un effetto di questo attributo che porta vantaggi è che il DOM (Document Object Model), nativamente supportato dai principali browser per consentire di modificare gli elementi di un documento HTML. Si tratta di un modo per poter accedere e aggiornare dinamicamente sia il contenuto che la struttura e lo stile dei documenti, che quindi risulterà già pronto per lo script.

Uso degli attributi asinc e defer nello stesso file

L’attributo defer può essere usanto anche in contemporanea con l’attributo async, per consentire ai browser legacy meno recenti, che supportano solo l'attibuto defer, di eseguire lo scaricamento in parallelo e rimandare alla fine l'esecuzione dello script, che altrimenti viene eseguito in modo sincrono.

Quale è la scelta migliore tra i due?

In generale, è preferibile usare async, quando è possibile e come seconda scelta defer, in casi come jQuery che può essere usato da latri script, nessun dei due.

Per script di tipot modulare che non si che non fa riferimento ad altri script, sarebbe preferibile utilizzare async. Per script che dipendono da altri script o vengono richiamati da un altro script, è preferibile utilizzare defer. In caso di script di piccole dimensioni, sarebbe preferibile inserirlo in linea senza attributi posto sopra agli altri eventuali script asincroni.