jQuery ha un ruolo importante nel riavvicinare gli sviluppatori web a JavaScript colmando lacune e inconsistenze nelle varie implementazioni dei browser più diffusi.
Come effetto collaterale di questo successo, in alcuni sviluppatori alle prime armi è nata la convizione che jQuery sia JavaScript, gettando le basi per produzione di codice jQuery corretto ma distante da principi di performance e organizzazione, fattori da tenere sotto controllo a prescindere dal linguaggio o dalla libreria usati,
Con questo articolo iniziamo ad analizzare alcune delle più importanti tecniche di programmazione in jQuery volte a migliorare stile e performance dei nostri script lato client.
jQuery Cache
La prima causa di bassa performance in uno script JavaScript è la cattiva gestione dell'interazione fra JavaScript e DOM.
La ragione è da ricercare nell'architettura della maggior parte dei browser, in cui i motori JavaScript e DOM sono entità distinte ed indipendenti, perciò, quando selezioniamo dei tag, ad esempio con $('#mioSelettore'), il motore JavaScript deve instanziare una nuova comunicazione con il DOM.
Se nel nostro codice abbiamo poche selezioni non è un problema, ma se la nostra applicazione interagisce pesantemente con il documento, questo colloquio fra i motori può rivelarsi un pericoloso collo di bottiglia.
Ecco uno script di esempio:
//aggiunge una classe al menu
$('#menu').addClass('has_dropdown');
//modifica una proprietà CSS
$('#menu').css('max-height', '200px');
//applica un plugin
$('#menu').dropdown();Abbiamo sollecitato l'oggetto DOM #menu per tre volte. Tutto funziona ma effettuare per tre volte una ricerca sul DOM per ottenere lo stesso elemento, per fare un parallelo con i database è come se, per estrarre tre colonne da un record, eseguissimo tre query SQL.
Il meccanismo della "cache"
In questo caso la soluzione risiede nella natura propria della funzione $() di jQuery. Tale funzione, infatti, restituisce un oggetto jQuery che mantiene una lista numerata degli elementi selezionati ai quali si può far riferimento senza dover andare ad interrogare continuamente il DOM.
Per ottimizzare lo script precedente basterà quindi salvare la prima selezione in una variabile di cache:
//salva la selezione in una variabile di cache
var $menu = $('#menu');
//aggiunge una classe al menu
$menu.addClass('has_dropdown');
//modifica una proprietà CSS
$menu.css('max-height', '200px');
//applica un plugin
$menu.dropdown();In questo modo effettuiamo la ricerca sul DOM solo una volta, lavorando sul riferimento all'oggetto jQuery. Nella maggior parte dei casi otterremo un aumento delle perfomance superiore al 50%.
Si può verificare l'esistenza del riferimento interagendo con l'indice, come si fa con un array:
console.log($menu[0]);
//restituirà un elemento HTML tipo <div id="menu">...</div>Da notare che, per convenzione ormai consolidata, ogni variabile riferita ad oggetti jQuery viene scritta con un $ iniziale, in modo da essere velocemente distinguibile all'interno degli script.
Per testare l'effettiva efficacia di questa tecnica è possibile eseguire questo test presente su jsperf.com, uno dei migliori strumenti per l'analisi delle performance JavaScript.
jQuery Chaining: concatenare i metodi
Secondo l'architettura della libreria, tutti i metodi che non estraggono un valore restituiscono un riferimento all'oggetto jQuery su cui sono stati lanciati. In termini pratici questo significa che è possibile lanciare più metodi in sequenza (chain):
$('#menu')
.addClass('has_dropdown') //aggiungo una classe al menu
.css('max-height', '200px') //modifico una proprietà CSS
.dropdown(); //applico un pluginQuesta tecnica rende più leggibile, compatto ed ordinato il codice. Lo snippet è scritto secondo una convenzione consolidata per cui ogni metodo della catena occupa una riga, ciò rafforza l'idea della sequenzialità delle azioni.
Inoltre, in questo caso non abbiamo salvato la selezione in una variabile, visto che tutti i metodi vengono lanciati sullo stesso oggetto jQuery $('#menu').
Sebbene non vi siano grandi vantaggi a livello di performance rispetto alla tecnica del caching (test jsperf), la tecnica del chaining risulta più comoda quando dobbiamo agire in sequenza su una serie di elementi senza necessità di accedervi nuovamente nelle righe successive.
