Differences

This shows you the differences between two versions of the page.

Link to this comparison view

Next revision
Previous revision
programming:js-loading-techniques [2014/08/11 11:37]
Giuseppe Di Terlizzi creata
programming:js-loading-techniques [2014/08/16 02:04] (current)
Giuseppe Di Terlizzi
Line 1: Line 1:
-====== JavaScript: ​Metodi di caricamento ​======+====== JavaScript: ​Come posizionare e caricare i nostri script al meglio ​====== 
 + 
 +{{http://​upload.wikimedia.org/​wikipedia/​commons/​6/​6a/​JavaScript-logo.png?​50 }} Questa piccola guida descrive i pro e contro della posizione dei nostri script JS all'​interno della pagina e diversi metodi di caricamento.
  
 ===== Dove posizionare lo script ===== ===== Dove posizionare lo script =====
  
-La posizione dello script può migliorare o addirittura peggiorare l'​esperienza utente. Dobbiamo valutare molto bene questo aspetto.+La posizione dello script ​all'​interno della pagina ​può migliorare o addirittura peggiorare l'​esperienza utente. Dobbiamo valutare molto bene questo aspetto.
  
 ==== Sezione Head ==== ==== 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.+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 modificare i nostri script JS per farli iniziare con l'​evento ''​onready''​.
  
 <code html> <code html>
Line 20: Line 22:
 </​html>​ </​html>​
 </​code>​ </​code>​
 +
 +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 dalla sezione ''<​head>''​. ​
 +
 +<div tip round 90% center>
 +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>'':​
 +
 +<code php>
 +...
 +  </​head>​
 +  <?php flush(); ?>
 +  <​body>​
 +...
 +</​code>​
 +
 +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>''​ e poi il resto della pagina.
 +</​div>​
  
 ==== Sezione Body ==== ==== 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.+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 ​web, senza eventuali ​blocchi nel caso in qui il server che ospita lo script sia molto lento. 
 + 
 +Spostare il codice JS in fondo pagina ci aiuta nel caso in cui nel nostro ​script ​JS dobbiamo utilizzare il DOM perchè arrivati a questo punto il browser avrà già fatto il parsing del codice HTML.
  
 <code html> <code html>
Line 43: Line 64:
 ==== Metodo classico ==== ==== Metodo classico ====
  
-Il metodo classico è senza dubbi l'​utilizzo del tag ''<​script>'':​+Senza dubbi il tag ''<​script>'' ​è il metodo più utilizzato:
  
 <code html> <code html>
Line 49: Line 70:
 </​code>​ </​code>​
  
-<div round tip center ​90%>+<div round tip center ​95%>
 L'​attributo ''​type''​ può essere omesso in quanto ad oggi l'​unico linguaggio di scripting standard per HTML è **JavaScript**. L'​attributo ''​type''​ può essere omesso in quanto ad oggi l'​unico linguaggio di scripting standard per HTML è **JavaScript**.
 </​div>​ </​div>​
Line 55: Line 76:
 ==== Metodo document.write ==== ==== Metodo document.write ====
  
-<​code ​html>+Questo metodo è andato in disuso ma nel caso eccolo qui: 
 + 
 +<​code ​javascript>
 <​script>​ <​script>​
     document.write('<​script src="',​ '​http://​example.org/​js/​script.js',​ '"​ type="​text/​JavaScript"><​\/​script>'​);​     document.write('<​script src="',​ '​http://​example.org/​js/​script.js',​ '"​ type="​text/​JavaScript"><​\/​script>'​);​
Line 63: Line 86:
 ==== Metodo DOM ==== ==== Metodo DOM ====
  
-Questo metodo permette di aggiungere al volo con JavaScript uno script esterno.+Questo metodo permette di aggiungere al volo con JavaScript uno script esterno ​utilizzando i metodi messi a disposizione dal DOM. 
 + 
 +<code javascript>​ 
 +var script = document.createElement('​script'​),​ 
 +    head   = document.getElementsByTagName('​head'​)[0];​ 
 +script.src = '​http://​example.org/​js/​script.js';​ 
 +head.appendChild(script);​ 
 +</​code>​ 
 + 
 +Come potete vedere lo script è molto semplice, si crea un elemento ''​script''​ e lo si appende all'​elemento ''​head''​. 
 + 
 +Una soluzione molto elegante è utilizzare una variante allo script //isogram// utilizzato da **Google Analytics**.
  
 <code javascript>​ <code javascript>​
-  var script ​document.createElement('​script'​)+(function(l,​o,​a,​d,​e,​r){ 
-      head   document.getElementsByTagName('​head'​)[0]; +  d=l.createElement(o); e=l.getElementsByTagName(o)[0]; 
-  ​script.src = '​http://​example.org/js/​script.js'​+  ​d.async=1; d.src=a; e.parentNode.insertBefore(d,​ e); 
-  head.appendChild(script);+})(document,'​script','​js/​script.js'​);​
 </​code>​ </​code>​
  
-{{tag>​programming js}}+{{tag>​programming js php}}
  • programming/js-loading-techniques.1407749825.txt.gz
  • Last modified: 5 years ago
  • by Giuseppe Di Terlizzi