JavaScript  »  Articoli  »  Mondo Javascript 

Negli ultimi anni si è assistito al proliferare di siti web che fanno un sempre più largo uso (spesso indiscriminato) di Javascript ed Ajax. Il progresso dei browser, con l'adeguamento graduale alle specifiche Ecmascript, e la comparsa di librerie Javascript come JQuery, Mootols, Prototype,YUI Library, Dojo, Ext, hanno consentito agli sviluppatori di creare con più facilità interfacce usabili e altamente interattive (spesso anche accessibili): finestre modali e lightbox, tooltip e messaggi di notifica, slideshow e gallerie di immagini, funzionalità drag&drop, menu a scomparsa, campi ad autocompletamento, la disponibilità di plugin di terze parti è praticamente infinita.

Un utilizzo improprio e massiccio di Javascript e la scrittura di codice poco efficiente possono però fortemente penalizzare le prestazioni di un sito, influenzando negativamente la velocità di caricamento delle pagine e il tempo di esecuzione degli script. Per tastare con mano un buon lavoro di ottimizzazione, basta navigare verso i siti web del momento: Facebook, Gmail, Google Maps, YouTube, Vimeo, FlickR, anche Ebay... tutte applicazioni che utilizzano una buona dose di Javascript e Ajax, ma che pure conservano una velocità di navigazione snella e piacevole.

Tra i fattori che condizionano le performance di un sito web, totalmente fuori dal nostro controllo e altamente condizionante è la velocità della connessione internet del navigatore. Anche la disponibilità di banda e la velocità del server in cui risiede il sito sono importanti, ma un hosting performante non può comunque sopperire a carenze di tipo progettuale. Allo sviluppatore non è dato inoltre di conoscere l'hardware, il sistema operativo e il browser dell'utente, elementi anche questi determinanti essendo Javascript un linguaggio eseguito sul client. In particolare ogni browser adotta un engine proprietario, con prestazioni anche notevolmente differenti: dovremo quindi trovare delle soluzioni di compromesso che consentano il risultato migliore sulle diverse piattaforme hardware e software.

Strumenti utili per lo sviluppatore

Proprio i browser (ma solo quelli più moderni) sono dotati di funzionalità o estensioni ormai indispensabili nello sviluppo di una applicazione web, anche dal punto di vista dell'ottimizzazione.

Per Mozilla Firefox c'è un plugin, Firebug (quì una guida interessante), eccone le principali caratteristiche: analisi della struttura HTML e dei CSS, DOM inspector, pannello risorse delle richieste HTTP, con informazioni sui file, sul peso degli elementi e sulla cache del browser. Inoltre è presente una vera e propria console per il debug degli errori Javascript e il profiling degli script, che mette a disposizione anche una serie di comandi; una volta abilitato, per accedere a Firebug basta cliccare sull'icona dello "scarafaggio" in basso a destra sulla barra di stato del browser.

Nello specifico è possibile estendere Firebug con due ulteriori plugin, sviluppati rispettivamente da Yahoo e Google, che permettono una analisi ancora più accurata delle pagine web e forniscono un report con suggerimenti per migliorarne le prestazioni: si tratta di Yslow e Page Speed.

Nelle più recenti versioni di Apple Safari e Google Chrome non è necessario installare plugin aggiuntivi, contengono infatti nativamente degli strumenti simili a Firebug: il menu sviluppo di Safari non viene mostrato di default ma va abilitato nelle preferenze, nella scheda Avanzate: analogamente le opzioni per sviluppatori di Chrome sono raggiungibili cliccando sul menu Pagina. Entrambi i browser mettono a disposizione un debugger e profiler Javascript (sono supportate le API della console di Firebug), un accurato pannello risorse e un DOM Inspector. In accoppiata con Chrome si può installare anche Speed Tracer, un tool specifico per monitorare le prestazioni delle pagine.

Con l'ultima versione (8), anche Internet Explorer si è dotato di una console degna di questo nome (accessibile premendo F12), dotata delle principali features offerte dai concorrenti; da sottolineare però la mancanza di un pannello risorse e il solo parziale supporto ai comandi delle API di Firebug.

Ridurre il tempo di caricamento

Siamo nel primo fondamentale livello di tuning della nostra applicazione: il tempo di caricamento di una pagina web (loadtime) è influenzato principalmente dal peso effettivo della pagina (e degli elementi che la compongono) e dal numero di richieste HTTP effettuate (per file Javascript, CSS, immagini, contenuti Ajax, oggetti Flash, etc).

Altri articoli

Altre guide

Altre newsletter