Esplorando i tipi di script async, defer e dynamic.
Oggi gli script possono essere più pesanti dell’HTML e la loro dimensione di download è maggiore, e anche il tempo di elaborazione è più lungo.
Ma ci possono essere alcuni problemi importanti come:
- Gli script non possono vedere gli elementi DOM sotto di loro
- Se c’è uno script ingombrante in cima alla pagina, “blocca la pagina”. Gli utenti non possono vedere il contenuto della pagina finché non viene scaricato ed eseguito.
Possiamo risolvere questo problema mettendo lo script alla fine (dopo l’html), ma questa soluzione costringerà lo script a caricare dopo il caricamento dell’html. Per documenti HTML lunghi, questo può essere un ritardo notevole se le persone hanno un internet lento.
Per fortuna, ci sono due attributi <script> che ci risolvono il problema: defer e async.
Con l’attributo defer il browser carica lo script in modalità ‘background’ e lo esegue quando viene caricato.
Quindi la modalità defer impedisce il blocco della pagina e gli script con defer vengono sempre eseguiti quando il DOM è pronto, ma prima dell’evento DOMContentLoaded.
L’evento DOMContentLoaded scatta quando il documento HTML iniziale è stato completamente caricato e analizzato, senza aspettare che fogli di stile, immagini e sottoframmi finiscano di caricare.
Gli script differiti mantengono il loro ordine relativo, proprio come gli script normali. Quindi, se abbiamo prima uno script lungo e poi uno più piccolo, quest’ultimo aspetta.
Ma l’attributo defer viene ignorato se il tag <script> non ha src.
Async
L’attributo async significa che aiuta lo script a caricarsi in modalità ‘indipendente’.
Il browser carica le pagine senza aspettare che gli script async vengano caricati. DOMContentLoaded e gli script async non aspettano l’un l’altro (ordine “load-first”).
Gli altri script non aspettano gli script async, e gli script async non aspettano loro. La modalità asincrona (come la modalità differita) non blocca la pagina.
Gli script asincroni sono ottimi quando integriamo uno script indipendente di terze parti nella pagina: contatori, annunci, strumenti analitici e così via, poiché non dipendono dai nostri script e i nostri script non dovrebbero aspettarli.
Dinamico
Possiamo anche aggiungere uno script dinamicamente usando JavaScript:
Lo script inizia a caricare non appena viene aggiunto al documento e si comporta come script “asincrono” per default.
Significa:
- Non aspettano niente, niente li aspetta.
- Lo script che carica per primo – viene eseguito per primo (ordine “load-first”).
Ma possiamo disattivare la modalità asincrona per gli script dinamici impostando script.async = false prima di aggiungerlo all’html.
Summary
Entrambi async e defer hanno una cosa in comune: il download di tali script non blocca il rendering della pagina. Così l’utente può leggere il contenuto della pagina e conoscerla immediatamente.
Grazie per aver letto. Spero che ti sia piaciuto 😎
.