Esecuzione asincrona degli script

L'attributo async dell'elemento script consente di caricare ed eseguire lo script associato in modo asincrono rispetto al resto della pagina. Questo significa che lo script viene caricato ed eseguito in background mentre la pagina continua a essere analizzata. Per le pagine che usano script che richiedono molte risorse di elaborazione, l'attributo async può migliorare in modo significativo le prestazioni in fase di caricamento.

Attributo async.

L'attributo async fa parte della specifica HTML5 del W3C (World Wide Web Consortium) ed è stato creato per le situazioni in cui non esistono dipendenze da uno script, ma quest'ultimo deve comunque essere eseguito appena possibile. Nell'esempio ipotetico seguente, ricorda che senza l'attributo async (o defer), uno script può bloccare il caricamento di altro contenuto della pagina.

Lilah ha un blog personale che utilizza widget basati su script per migliorare l'esperienza dei visitatori, ma la pagina funziona anche se non si caricano i widget, per venire incontro agli utenti che hanno disabilitato gli script. Attualmente, Lilah carica i widget nella parte superiore del file HTML, ma ha ricevuto proteste per i lunghi tempi di caricamento della pagina dovuti al tempo di esecuzione degli script. Per velocizzare l'operazione ha provato a spostare gli script al termine della pagina, ma la quantità di contenuto è tale che questa modifica non garantisce un'esperienza di navigazione avanzata sufficientemente veloce. Deve trovare il modo di caricare i widget il più rapidamente possibile senza bloccare il resto della pagina. Dopo una rapida ricerca si rende conto che l'attributo async di HTML5 è esattamente quello che ci vuole. Posizionando tutti i widget basati su script in un file esterno, può rapidamente ripristinare la pagina avendo ottenuto un migliore equilibrio tra prestazioni e miglioramenti basati su script.


<head>
  <title>Lilah's Blog</title>
  <script async src="widgets.js"></script>
</head>


Informazioni sull'implementazione

Internet Explorer 10 e le app di Windows Store scritte in JavaScript supportano entrambi gli attributi async e defer per l'elemento script (l'attributo defer è supportato nelle versioni precedenti di Windows Internet Explorer). Gli attributi async e defer possono essere utilizzati solo se è presente l'attributo src. Ecco le quattro combinazioni possibili.

UtilizzoDescrizione

<script src="widgets.js"></script>

Lo script viene eseguito immediatamente e la pagina attende il termine dell'esecuzione prima di continuare l'analisi. In questo modo si rischia una drastica riduzione delle prestazioni in fase di caricamento.

<script async src="widgets.js"></script>

Lo script viene scaricato in modo asincrono mentre l'analisi della pagina prosegue. Lo script viene eseguito al termine del download.

<script defer src="widgets.js"></script>

Lo script viene eseguito al termine dell'analisi della pagina.

<script async defer src="widgets.js"></script>

L'attributo async viene soddisfatto e l'attributo defer ignorato. In questo modo gli sviluppatori possono utilizzare async nei browser che lo supportano, ma ripiegare su defer nei browser che non supportano async.

 

Riepilogando, l'attributo async consente agli sviluppatori Web di ridurre i tempi di caricamento delle pagine con sforzi minimi, oltre a ridurre il numero delle soluzioni alternative specifiche del browser necessarie per le librerie del caricatore di script.

Informazioni di riferimento sulle API

async
defer

Dimostrazioni di Internet Explorer Test Drive

HTML5 Async Scripts

Post di IEBlog

Asynchronous Programming in JavaScript with "Promises"

Specifica

HTML5: sezione 4.3.1

 

 

Mostra:
© 2014 Microsoft