Consigli per avere selettori jQuery più efficienti

Alcuni giorni fa Craig Buckler ha pubblicato un interessante articolo su Sitepoint in cui presentava cinque modi per aumentare la performance dei selettori jQuery. In questo articolo vorrei riprendere il discorso di Craig aggiungendovi delle precisazioni che potranno esservi utili nel vostro lavoro con jQuery.

Usare un ID se possibile

Un selettore di ID è di gran lunga il metodo più veloce per selezionare un elemento con jQuery:

$('#test')

Tuttavia, ciò non è ancora il massimo. Infatti se usiamo la sintassi CSS il selector engine di jQuery deve comunque operare una conversione. Se il browser supporta il metodo querySelector(), verrà usato questo metodo, altrimenti il metodo tradizionale getElementById().

Quindi il sistema più veloce prevede appunto l'uso dell'ultimo metodo DOM citato:

$(document.getElementById('test'))

Usare i selettori di classe in modo specifico

Nei CSS esiste una distinzione tra .test e div.test. Il primo è un selettore di classe generico (applicabile a tutti gli elementi), mentre il secondo è un selettore di classe di un elemento specifico. In jQuery il secondo è molto più performante del primo:

$('div.test')

Nei browser che supportano il DOM in modo completo, potete usare il metodo getElementsByClassName(), che è in assoluto il metodo più veloce per gestire le classi. Perchè? Perchè i metodi del DOM vengono implementati con linguaggi come C/C++, di gran lunga molto più veloci delle soluzioni JavaScript:

$(document.getElementsByClassName('test'))

Semplificare i selettori

Bisognerebbe evitare selettori complessi come:

$('body #page:first-child article.main p#intro em')

e invece usare selettori come:

$('p#intro em')

Tuttavia esiste un altro modo per semplificare i selettori ed è quello di usare il loro contesto. Il contesto infatti viene passato come secondo parametro al wrapper $() e specifica il nodo o il punto del DOM in cui jQuery deve cominciare a cercare. Per impostazione predefinita il contesto è sempre document.

Quindi avremo:

$('em', document.getElementById('intro'))

che è molto più performante.

Evitare la ripetizione dei selettori

Bisognerebbe sempre evitare di ripetere i selettori, come in questo caso:

$('p').css('color', 'green');
$('p').text('Test');

e usare invece la concatenazione di jQuery:

$('p').css('color', 'green').text('Test');

oppure usare una copia cache del selettore:

var $p = $('p');
$p.css('color', 'green');
$p.text('Test');

In tal senso Craig ci avverte che:

A differenza delle collezioni di nodi DOM, le collezioni jQuery non sono live e l'oggetto non viene aggiornato quando gli elementi vengono aggiunti o rimossi dal documento. Potete evitare questo problema creando una collezione DOM e passandola al wrapper $() quando richiesto.

Quindi avremo:

var p = document.getElementsByTagName('p');
$(p).css('color', 'green');
// aggiornamento del DOM
$(p).text('Test');