Inserisci libreria front-end (ad esempio Analytics): perché non un semplice tag <script>?

Question

Al fine di inserire il codice GA (e praticamente qualsiasi altra libreria JS), il frammento di codice è:

<script> 
    (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){ 
    (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o), 
    m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m) 
    })(window,document,'script','//www.google-analytics.com/analytics.js','ga'); 

    ga('create', 'UA-XXXXXX-X', 'auto'); 
    ga('send', 'pageview'); 

</script> 

Perché non:

<script type="text/javascript" src="//www.google-analytics.com/analytics.js" async></script> 

alla fine del body?

Answer 1

Google sa che lo script che hanno non dipende da nessun altro script nella pagina, pertanto impongono che lo script venga eseguito come "non bloccante", il che significa che il contenuto dello script viene eseguito al più presto, al di fuori del solito etichettare gli ordini all'interno del documento (non ha alcuna dipendenza).

Il implementation of the DOM script tag non è banale e deve soddisfare interdipendenze di script, a meno che non sia esplicitamente indicato come "async". In questo caso il codice esterno verrà eseguito immediatamente, senza aspettare che venga caricato altro nella pagina.

Google have documented their approach well here. Fondamentalmente migliorerà le prestazioni sui vecchi browser consentendo l'esecuzione dello script async. L'inserimento dinamico di un tag script simula il comportamento dell'attributo nativo async nei browser moderni. Puoi vedere che il tag dello script dinamico è contrassegnato come async nella loro funzione di iniquo del codice, per soddisfare anche i browser moderni.

cioè a.async=1;

Answer 2

Il primo motivo è per alcuni script che devono essere eseguiti prima che venga creato il codice HTML e il secondo per non essere in uno script esterno è che è necessario sovrascrivere alcuni valori.

ga('create', 'UA-XXXXXX-X', 'auto'); 

è necessario inserire qui il proprio account GA, quindi non ha senso inserire uno script breve in un file esterno. È fatto in questo modo per facilità d'uso in modo che anche gli sviluppatori principianti e i non sviluppatori possano aggiungere analisi a una pagina.

Answer 3

Come è stato menzionato nei commenti, Google sta semplicemente fornendo un blocco di script a prova di idiota con il massimo supporto del browser.

In particolare, l'attributo async non è supportato in IE9. Vedere http://caniuse.com/#search=script-async

Answer 4

Secondo Google di docs, essi raccomandano la versione più semplice <script src> ma solo se ci si rivolge browser moderni (esclusi IE 9).