Qual è esattamente il vantaggio dell'attributo async HTML5 sugli elementi di script?

Question

Ho una certa confusione intorno al nuovo attributo async all'elemento di script in HTML5 che spero che qualcuno possa dare una risposta chiara a.

I browser sono in grado di connessioni parallele, pertanto le immagini verranno scaricate in parallelo. Ma qualsiasi javascript esterno non viene scaricato in parallelo con altri javascript esterni e immagini. Gli script bloccano il caricamento della pagina finché non sono stati scaricati ed eseguiti.

Per scaricare uno script senza bloccare il resto della pagina di caricamento, la tecnica più comune è quello di creare un elemento di script, come Google Analytics snippet fa:

var ga = document.createElement('script'); 
ga.type = 'text/javascript'; 
ga.src = '...ga.js'; 
ga.async = true; 
var s = document.getElementsByTagName('script')[0]; 
s.parentNode.insertBefore(ga, s); 

io non sono sicuro di come funziona esattamente - sia

• il browser analizza e rende la pagina, quindi una volta che ha finito nota il DOM è cambiato, con conseguente script ga.js essere scaricato ed eseguito

o

• il browser inizia a scaricare il codice JavaScript in parallelo con altre risorse.

Penso che sia il secondo.

Il nuovo snippet di Google Analytics asincrono include l'attributo async HTML5 nell'elemento di script che crea. Ciò non aiuterà il problema del blocco della pagina, che è già stato risolto con la tecnica "Script DOM Element". Quindi cosa aggiunge asincrono all'immagine? Secondo w3schools, "se è presente async, lo script viene eseguito in modo asincrono con il resto della pagina (lo script verrà eseguito mentre la pagina continua l'analisi)".

E secondo il sito di Steve Souders, "il vantaggio principale di questo [attributo async] è che dice al browser che gli script successivi possono essere eseguiti immediatamente - non devono aspettare ga.js".

Quindi la tecnica degli elementi DOM di Script e Sincronizzazione risolvono entrambi lo stesso problema?

Grazie.

Answer 1

L'attributo async è solo più chiaro (senza ambiguità molto semplice) e più pulito (sarà, o è già, parte delle rispettive specifiche HTML5) l'approccio per risolvere il problema. Se il tuo sito pubblica script da un altro dominio (o CDN), allora l'attributo async ti dà un po 'di affidabilità (consenti all'utente di leggere almeno il contenuto statico) in quanto la pagina non si bloccherà mentre uno script da un lento (forse giù) l'host remoto sta tentando di caricare.

Answer 2

funzionerà:

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> 
<script>$('body').append('Yey');</script> 

non funzionerà:

<script async src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> 
<script>$('body').append('Yey');</script> 

Answer 3

C'è stato un grande article da Jake Archibald su HTML5Rocks che affronta questo argomento.

Answer 4

Secondo https://www.html5rocks.com/en/tutorials/speed/script-loading/ se si aggiunge dinamicamente un elemento <script> esso può non essere eseguito fino a quando DOMContentLoaded viene licenziato. Cioè, alcuni user agent (ad esempio MSIE 10) attenderanno che DOM sia pronto prima di eseguire dinamicamente gli elementi aggiunti <script>.

Immagino che Google voglia far funzionare il proprio codice di analisi più velocemente su tali agenti utente e come tale devono aggiungere il flag async per comunicare al browser (ad esempio MSIE 10) che è possibile iniziare a eseguire lo script il prima possibile. I browser compatibili con HTML5 verrebbero eseguiti come se lo async fosse vero anche se non era stato definito, quindi lo async=true è stato aggiunto solo per migliorare le prestazioni con i browser non HTML5.