Feb
12
Posted on 12-02-2008
Categories: ajax, html, javascript, ottimizzazione - Author: Mat on 12-02-2008

E’ un luogo comune il fatto che gli script javascript vadano inclusi dentro il tag head della pagina. Con l’approdo di ajax sul web, javascript è più utilizzato che mai e il caricamento di tutti i javascript nell’header della pagina rallenta il completamento della pagina. Per questo possono essere inclusi anche dopo, dentro al body, semplicemente prima del loro utilizzo. Certo che inserirli tutti insieme nell’header rende il codice più ordinato, ma in questo modo almeno parte della pagina si è già caricata e l’utente non deve attendere troppo per vedere qualcosa.
Dipende anche dall’utilizzo che se ne fa di questi script; per esempio uno script di validazione delle form come JSValidate è inutile caricarlo nel file header del vostro sito perchè è utile solo dove ci sono delle form, basterà caricarlo nelle pagine opportune. Script come quello di Google Analytics possono essere caricati tranquillamente nel vostro file di footer, prima della chiusura del body, così sarà presente in tutte le pagine e non inficierà sul caricamento del resto della pagina. Se usate script grafici in tutta la pagina, come scriptaculous o mootools, converrà includerli nell’header, in modo che la pagina sia interattiva il prima possibile rispetto ai tempi di visualizzazione della stessa.
Un’altro stratagemma per evitare il rallentamento dei javascript è l’uso dell’attributo defer nel richiamo dello script:

<script src="library.js" type="text/javascript" defer="defer"></script>

che però funziona diversamente a seconda del browser. Inizialmente era stato pensato per caricare lo script al termine del caricamento della pagina; IE invece ha reinterpretato quest’attributo, caricando il file nel momento del richiamo, ma eseguendo il codice all’interno dello script in differita, solo quando la pagina è stata caricata.
Personalmente utilizzo defer solo quando non posso farne a meno, preferisco il primo metodo che è cross-browser e più performante.

Vedi anche:
quirksmode.org
hunlock.com


 
Post a Comment
Name:
Email:
Website:
Comments: