Con HTML5, abbiamo due nuovi attributi booleani per il tag <script>: async e defer. Async permette l’esecuzione degli script in modo asincrono e defer permette l’esecuzione solo dopo che l’intero documento è stato analizzato.
Questi due attributi sono un must per aumentare la velocità e le prestazioni dei siti web. Permettono l’eliminazione del render-blocking JavaScript dove la pagina dovrebbe caricare ed eseguire gli script prima di finire di renderizzare la pagina. Ecco un esempio di utilizzo:
<script defer src="https://www.digitalocean.com/js/jquery.min.js"></script>Async vs Defer
Con async, il file viene scaricato in modo asincrono e poi eseguito appena scaricato.
Con defer, il file viene scaricato in modo asincrono, ma eseguito solo quando l’analisi del documento è completata. Con defer, gli script verranno eseguiti nello stesso ordine in cui vengono chiamati. Questo rende defer l’attributo di scelta quando uno script dipende da un altro script. Per esempio, se state usando jQuery e altri script che dipendono da esso, dovreste usare defer su di essi (jQuery inclusa), assicurandovi di chiamare jQuery prima degli script dipendenti.
Una buona strategia è quella di usare l’async quando possibile, e poi differire quando l’async non è un’opzione.
👉Nota che entrambi gli attributi non hanno alcun effetto sugli script in linea.
Supporto del browser
Posso usare script-async? Dati sul supporto della funzione script-async nei principali browser da caniuse.com.