This is an old revision of the document!
JavaScript: Metodi di caricamento
Dove posizionare lo script
La posizione dello script può migliorare o addirittura peggiorare l'esperienza utente. Dobbiamo valutare molto bene questo aspetto.
Sezione Head
Caricare uno script JS nella sezione <head>
, è il metodo standard. Potrebbe penalizzare l'esperienza utente in quanto il browser attende per il rendering della pagina che tutti i file esterni (script, stili, etc) sono stati scaricati. L'esecuzione dello script inizia al termine del suo caricamento e nel caso in cui nello script è necessario interagire con il DOM potremmo avere problemi in quanto il browser non ha ancora effettuato il parsing del codice HTML.
<html> <head> <title>Lorem Ipsum</title> <script type="text/javascript" src="http://example.org/js/script.js"></script> </head> <body> <p>Lorem Ipsum</p> </body> </html>
Sezione Body
Situato alla fine della sezione <body>
, lo script viene caricato al termine del rendering della pagina. Questo si traduce in un caricamento e visualizzazione più rapida della pagina senza blocchi nel caso in qui il server che ospita lo script JS sia molto lento. Questa tecnica è utile nel caso in cui nel nostro codice JS dobbiamo utilizzare il DOM in quanto quando inizierà l'esecuzione dello script il browser avrà già fatto il parsing del codice HTML.
<html> <head> <title>Lorem Ipsum</title> </head> <body> <p>Lorem Ipsum</p> <script type="text/javascript" src="http://example.org/js/script.js"></script> </body> </html>
Medodi di caricamento
Abbiamo visto che la posizione dello script può influire sull'esperienza utente. Adesso vediamo quali tecniche possiamo utilizzare per caricare i nostri script.
Metodo classico
Il metodo classico è senza dubbi l'utilizzo del tag <script>
:
<script type="text/javascript" src="http://example.org/js/script.js"></script>
L'attributo type
può essere omesso in quanto ad oggi l'unico linguaggio di scripting standard per HTML è JavaScript.
Metodo document.write
<script> document.write('<script src="', 'http://example.org/js/script.js', '" type="text/JavaScript"><\/script>'); </script>
Metodo DOM
Questo metodo permette di aggiungere al volo con JavaScript uno script esterno.
var script = document.createElement('script'), head = document.getElementsByTagName('head')[0]; script.src = 'http://example.org/js/script.js'; head.appendChild(script);
Come potete vedere lo script crea un elemento script
e lo appende al tag head
.
Una soluzione molto elegante è utilizzare una variante allo script isogram utilizzato da Google Analytics.
(function(l,o,a,d,e,r){ d=l.createElement(o); e=l.getElementsByTagName(o)[0]; d.async=1; d.src=a; e.parentNode.insertBefore(d, e); })(document,'script','js/script.js');