Selettori jQuery, efficienza

Question

Ho letto più recentemente sull'efficienza dei diversi motori di selezione. So che jQuery usa il motore Sizzle e this blog post su alcune cose di jQuery menzionate che il motore Sizzle farà a pezzi il tuo selettore in un array e poi analizzerà da sinistra a destra.

Quindi, da destra a sinistra, inizia a decifrare ogni elemento con espressioni regolari. Ciò significa anche che la parte più corretta del tuo selettore dovrebbe essere il più specifica possibile, ad esempio un id o un nome di tag.

La mia domanda è se sia più efficiente per eseguire un selettore con solo l'ID specificato o il nome del tag così:

var div = $('#someId'); 
//OR 
var div = $('div#someId'); 

che non scrivo il mio CSS in forma div#someId tendo per fare i miei selettori allo stesso modo, sto facendo sì che Sizzle esegua un lavoro extra (supponendo che QuerySelectorAll non sia disponibile)?

Answer 1

jQuery e Sizzle ottimizzare il selettore #id^[source]-document.getElementById(id). Penso che non siano in grado di ottimizzarlo in questo modo con lo tag#id.

Il primo è più veloce.

Il BTW che specifica il nome del tag per un selettore #id ha una sovra-specifica, poiché può esistere un solo tag con un determinato ID sul documento. La sovra-specifica è più lenta even in CSS.

Answer 2

var div = $('#someId'); //should be faster 

jQuery utilizzerà getElementById() per il selettore sopra

var div = $('div#someId'); //would probably preform slower due to finding all the divs first 

jQuery utilizzerà getElementsByTagName(), quindi scorrere anche se l'array di elementi per il selettore sopra

Si dovrebbe anche ricordare, i nomi dei tag dovrebbe utilizzabile con selettori di classe (ove possibile)

var div = $('div.myclass') //faster than the statement below 

contro

var div = $('.myclass') //slower 

Answer 3

Se si utilizza jQuery, si può assumere un browser con getElementById. $('#someId') può essere convertito in document.getElementById('someId'). $('div#someId') non lo sarà, quindi sarà più veloce perdere il nome del tag.

jsPerf demonstrating this. La differenza è enorme.

Answer 4

JsPerf: http://jsperf.com/jquery-id-vs-tagname-id

La prima sta per essere più veloce perché ha solo per controllare l'ID. Il secondo esegue lo stesso controllo E deve assicurarsi che il tagname sia corretto. div#id non vi darà l'elemento con id id a meno che non si tratta di un div

Answer 5

Invece di speculare, misuriamolo!

Ecco un caso di test con questa pagina caricata, quindi corrispondente a un elemento casuale con entrambi i metodi.

Assicurarsi di scorrere verso il basso fino in fondo.

http://jsperf.com/which-jquery-sizzle-selector-is-faster#runner

Come ci si potrebbe aspettare, un id pianura è più veloce di un tag un qualificato (riduzione a getElementByID). Questo è lo stesso quando si usano le classi.

La selezione per ID è molto più veloce rispetto alla selezione per classe, principalmente perché gli ID sono garantiti come unici.

Answer 6

Qui è possibile vedere il codice sorgente: http://code.jquery.com/jquery-1.6.2.js nella funzione init.

Il selettore più veloce è $('') che restituisce immediatamente un oggetto jQuery vuoto.

$('body') è prossima, che jQuery converte document.body

La seguente è $('#id') che utilizza document.getElementById('id').

Qualsiasi altro selettore come $('div#id') diventerà semplicemente una chiamata a $(document).find('div#id'). find() è molto complesso rispetto a qualsiasi altra soluzione e utilizza Sizzle JS per selezionare il div.