Le pagine web diventano ogni giorno più complesse e JavaScript è sicuramente una delle motrici al traino di questa evoluzione. Una maggiore complessità però si traduce spesso in una maggiore pesantezza nel rendering e nella navigazione della pagina; è quindi importante ottimizzare il codice JavaScript in modo da spremere il massimo dal nostro codice.
Oltre alla scelta degli algoritmi giusti, molti colli di bottiglia prestazionali vengono introdotti dal linguaggio stesso. Ecco quindi alcune piccole accortezze che nella maggior parte dei casi aiutano a rendere il codice più efficiente, anche in modo significativo. In ogni caso l'efficacia di questi trucchetti non è garantita nella totalità dei casi: ogni browser interpreta il codice a modo suo ed è comunque sempre consigliabile effettuare il profiling di una funzione tramite tool quali FireBug.
Ottimizzazione dei Loop
Un metodo "classico" di scrivere un loop è il seguente
for(var i = 0; i < my_array.length; i++){ }
oppure
for(var i = 0; < myMethod(); i++){ }
Queste due scritture hanno però un problema: nel primo caso l'oggetto my_array viene deferenziato ad ogni iterazione, nel secondo analogamente ad ogni passo viene eseguito il metodo myMethod. Questo comporta un overhead notevole.
In questi casi è meglio effettuare una sola volta fuori dal ciclo il comando incriminato e poi eseguire il loop. Ad esempio
var len = my_array.length
for (var i = 0; i < len; i++) { }
oppure
var len = myMethod();
for(var i = 0; i < len; i++){ }
Questo piccolo cambiamento che a prima vista può sembrare banale è capace di migliorare il tempo di esecuzione del ciclo del 240% (a questa pagina un piccolo benchmark). Lo stesso discorso vale anche per ogni operazione all'interno del ciclo che può essere convenientemente tirata fuori dal ciclo.
Un altro modo per scrivere un ciclo che in alcuni casi offre un discreto vantaggio prestazionale è
var i = my_array.length;
while( i-- ) { Â }
Tuttavia questa scrittura rende il codice meno comprensibile e intuitivo quindi prima di adottarla è bene controllare che i vantaggi in termini prestazionali siano significativi.
Chiamare metodi o proprietà da array
Oltre alla deferenzazione un'altra operazione che bisognerebbe evitare di ripetere è l'accesso ad un array (infatti in linea di principio è la stessa cosa di una deferenzazione).
myArray[myIndex].myMethod1();
myArray[myIndex].myMethod2();
myArray[myIndex].my_variable;
In questo caso ad ogni chiamata dobbiamo accedere nuovamente all'elemento myIndex dell'array. Sarebbe molto meglio accedere una volta per recuperare l'elemento voluto e poi invocare i metodi solo su di lui (senza "ricercarlo" ogni volta).
var element = myArray[myIndex];
element.myMethod1();
element.myMethod2();
element.my_variable;
Notate che questa ottimizzazione a volte è fatta dal browser stesso. In Firefox 14 ad esempio quest'ultima scrittura viene eseguita leggermente più lenta della prima (anche qui c'è un piccolo benchmark).
Modificare il DOM
Accedere e modificare la struttura DOM di una pagina web è un'operazione decisamente costosa poiché ad ogni modifica viene interessato il motore di rendering della pagina. In generale dopo ogni funzione viene invocata nuovamente la funzione di rendering.
àˆ percià importante cercare di raggruppare il più possibile le modifiche al DOM. Ad esempio invece di appendere al documento le nostre modifiche singolarmente è preferibile crearsi un document fragment che andremo poi ad inserire nella pagina tutto in un colpo.
Variabili locali e variabili globali
Qui la regola generale è: più la variabile è definita vicino allo scope attuale, più viene eseguita velocemente. Da questo deriva che le variabili globali sono quelle che vengono trovate più tardi di tutte e quindi possono essere inefficienti.
A questo proposito se dobbiamo accedere frequentemente ad una variabile globale è bene "trasformarla" in variabile locale in modo da minimizzare i tempi di accesso. Ad esempio
var global_var = 20;
function MyFunc(){
 var local_var = global_var;
 for(var i = 0, length = 999; i <= length; i++){
  ...
 }
}
Spero che questa piccola rassegna possa esservi utile. In ogni caso ricordate che è sempre bene verificare l'efficacia di ogni ottimizzazione nel caso reale tramite l'utilizzo di strumenti di profiling.