Differences

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

Link to this comparison view

Both sides previous revision Previous revision
Next revision
Previous revision
programming:js-loading-techniques [2014/08/11 13:03]
Giuseppe Di Terlizzi
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 =====
Line 5: Line 7:
 La posizione dello script all'​interno della pagina 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.
  
-==== Nella sezione ​Head ==== +==== Sezione ​Head ====
- +
-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>​''​. ​+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 23: Line 23:
 </​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>'':​ 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>'':​
  
Line 33: Line 36:
 </​code>​ </​code>​
  
-In questo modo il browser non attende il dowload di tutta la pagina HTML per iniziare il caricamento degli script e stili css, ma riceve per primo tutta la sezione ''<​head>''​.+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. 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.+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.
  
-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.+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 66: 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 72: 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 80: Line 86:
 ==== Metodo DOM ==== ==== Metodo DOM ====
  
-Questo metodo permette di aggiungere al volo con JavaScript uno script esterno utilizzando i metodi DOM.+Questo metodo permette di aggiungere al volo con JavaScript uno script esterno utilizzando i metodi ​messi a disposizione dal DOM.
  
 <code javascript>​ <code javascript>​
Line 89: Line 95:
 </​code>​ </​code>​
  
-Come potete vedere lo script è molto semplice, si crea un elemento ''​script''​ e lo si appende ​al tag ''​head''​.+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**. Una soluzione molto elegante è utilizzare una variante allo script //isogram// utilizzato da **Google Analytics**.
  • programming/js-loading-techniques.1407755034.txt.gz
  • Last modified: 5 years ago
  • (external edit)