JavaScript  »  Articoli  »  Mondo Javascript 

Abbattere il tempo di esecuzione degli script.

Dopo la fase di "dimagrimento" della nostra applicazione, il lavoro di ottimizzazione non è per niente terminato. Infatti, potrebbe esserci ancora qualcosa a guastare la user-experience del sito: l'esecuzione degli script avviene talvolta con un piccolo ma percettibile delay rispetto al momento in cui avremmo voluto che avvenisse? Le animazioni e le dissolvenze sono "scattose"? La risposta alle interazioni dell'utente non è repentina? Peggio, la lentezza delle chiamate Ajax pregiudica il caricamento dei dati? È possibile allora che il nostro codice Javascript sia poco efficiente, gravando il browser con calcoli magari inutili o eccessive operazioni di parsing.

L'utilizzo di uno tra i più noti framework Javascript può aiutare ad evitare comuni problemi di performance (es. memory leaks), assicurando anche una maggiore compatibilità cross-browser: il continuo aggiornamento e il lavoro di sviluppo di un team di esperti programmatori sono una garanzia. I pregi di queste librerie rappresentano però un'arma a doppio taglio: l'estrema facilità di impiego e lo "snaturamento" del linguaggio Javascript possono condurre ad uso deleterio di questi strumenti. I bug prestazionali potrebbero derivare proprio dal nostro codice, quello realizzato da noi stessi, snippet che magari riutilizziamo nei vari progetti. Una semplice funzione riscritta diversamente può diminuire il tempo di esecuzione di uno script e alleggerire il carico di lavoro dell'engine Javascript del browser.

Possiamo testare le performance degli script tramite le API della console di Chrome, Safari e Firebug: con i comandi console.time e console.timeEnd è possibile visualizzare in un log il tempo di esecuzione di una funzione o di un ciclo (esempio):

<script>
console.time('constructor');
for ( var i=0; i < 100000; i++) {
	var arr = new Array();
}
console.timeEnd('constructor');

console.time('literal');
for ( var i=0; i < 100000; i++) {    
var arr = [];
}
console.timeEnd('literal');
</script>

Purtroppo per Internet Explorer, queste specifiche funzionalità non sono supportate nemmeno nell'ultima versione del browser Microsoft. Per supplire a questa mancanza, ho arrangiato un paio di plugin, uno basato su Prototype (esempio), l'altro su JQuery (esempio), che utilizzo nella fase di debug a seconda del progetto.

/* uso di jquery */
<script type="text/javascript" src="js/jquery-1.4.2.js"></script>
<script type="text/javascript" src="js/jquery.inherit-1.3.1.js"></script>
<script type="text/javascript" src="js/jquery-timer.js"></script>


/* uso di prototype */
<script type="text/javascript" src="js/prototype.js"></script>
<script type="text/javascript" src="js/prototype-timer.js"></script>

// common
var test = new timer(); 
test.start('example'); 
myFunc();
test.end('example');

In entrambi i casi per inizializare il benchmark basta istanziare la classe e richiamare il metodo start() subito prima del codice da valutare; il metodo stop(), va viceversa eseguito subito dopo e attiva l'output del log, nella console, per i browser che ne forniscono il supporto, e in un classico alert per gli altri. Naturalmente i due metodi richiedono il passaggio di un parametro identificativo, uno stesso nome univoco, permettendo così il test contemporaneo anche di più parti di codice. Sia chiaro: i risultati ottenuti sono spesso approssimativi e comunque non bisogna attribuire ad essi un valore assoluto.

Già confrontando i risultati ottenuti dal codice dei tre esempi precedenti, è possibile fare una importante constatazione: nella dichiarazione di un array (o di un oggetto Javascript), la forma letterale ([], {}) è più performante del tradizionale costruttore (new Array(), new Object()).

Altri articoli

Altre guide

Altre newsletter