Home / Programmazione / Javascript - AJAX / Attributi async e defer in Javascript
Mattepuffo

Attributi async e defer in Javascript

Attributi async e defer in Javascript

Generalmente, quando includiamo uno script Javascript nello nostre pagine, lo facciamo in maniera sincrona:

<script type="text/javascript" src="http://code.jquery.com/jquery-2.1.3.min.js"></script>

Girovagando tra gli strumenti di Google Webmaster, mi sono reso conto di un alert, che mi indicava che gli script risultavano bloccanti per la pagina.

Questo proprio perchè caricati in maniera sincrona.

Ho, quindi, scoperto che gli script possono essere caricati anche in maniera asincrona.

Per farlo dobbiamo aggiungere un attributo tra defer e async:

<script defer type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>

Tra i due c'è differenza.

async fa il download durante il parsing dell'HTML e stopperà il parsing fino alla fine del download.

defer, invece, farà il download alla fine del parsing; garantendo, comunque, che gli script vengano eseguiti nell'ordine giusto.

Tra i due, generalmente uso defer, ma attenzione: non tutte le librerie possono essere usate con questi attributi!

jQuery ne è un classico esempio; jQuery deve essere caricato alla maniera classica.

Ho fatto varie prove, e alla fine tutto funzionava solo con il caricamento classico.

Enjoy!