This is an old revision of the document!


JavaScript: Metodi di caricamento

La posizione dello script può migliorare o addirittura peggiorare l'esperienza utente. Dobbiamo valutare molto bene questo aspetto.

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>

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>

Abbiamo visto che la posizione dello script può influire sull'esperienza utente. Adesso vediamo quali tecniche possiamo utilizzare per caricare i nostri script.

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.

<script>
    document.write('<script src="', 'http://example.org/js/script.js', '" type="text/JavaScript"><\/script>');
</script>

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');
  • programming/js-loading-techniques.1407753341.txt.gz
  • Last modified: 5 years ago
  • by Giuseppe Di Terlizzi