This is an old revision of the document!


JavaScript: Metodi di caricamento

Questa piccola guida descrive diversi metodi di caricamento degli script JavaScript nelle nostre pagine HTML.

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

Caricare uno script JS nella sezione <head>, è il metodo in assoluto più utilizzato. 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. Per risolvere questo problema dobbiamo far iniziare lo script con l'evento onready.

Nel caso in cui lo script risiede su un server molto lento, all'utente può dar impressione che la pagina si sia bloccata in quanto il browser non effettua il rendering della pagina HTML finchè tutti gli script e stili css siano stati caricati nella sezione <head>.

<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>

Un modo per velocizzare il caricamento degli script e stili CSS con PHP è l'utilizzo della funzione flush() tra la fine del tag <head> e l'inizio del tag <body>:

...
  </head>
  <?php flush(); ?>
  <body>
...

In questo modo il browser non attende il dowload di tutta la pagina HTML da parte del webserver per iniziare il caricamento degli script e stili css, ma riceve per primo tutta la sezione <head>.

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 eventuali blocchi nel caso in qui il server che ospita lo script 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.

Senza dubbi il tag <script> è il metodo più utilizzato:

<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 utilizzando i metodi DOM.

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 è molto semplice, si crea un elemento script e lo si 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.1407764770.txt.gz
  • Last modified: 5 years ago
  • by Giuseppe Di Terlizzi