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:18]
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 ​======
  
-Questa piccola guida descrive diversi metodi di caricamento ​degli script JavaScript nelle nostre pagine HTML.+{{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 9: Line 9:
 ==== 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''​. +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''​.
- +
-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>​''​. ​+
  
 <code html> <code html>
Line 24: 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> <div tip round 90% center>
Line 36: 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>​ </​div>​
  
Line 42: Line 42:
  
 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 76: 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 84: 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 93: 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.1407755895.txt.gz
  • Last modified: 5 years ago
  • by Giuseppe Di Terlizzi