prestazioni di jQuery selettori con ID

Question

conosco in jQuery se usiamo ID per selezionare gli elementi, è così efficient.I hanno una domanda su questo selettori:

perche questo 3 selettori:

$('#MyElement') 

$('#Mytbl #MyElement') 

$('#Mytbl .MyClass') 

quale è più veloce e perché? Come posso controllare il tempo trascorso per selezionare il mio elemento in jQuery?

Answer 1

Un selettore ID diretto sarà sempre il essere il più veloce.

ho creato un caso semplice test in base alla tua domanda ...

http://jsperf.com/selector-test-id-id-id-id-class

selezionando annidata ID di è solo sbagliato, perché se un ID è unico (che dovrebbe essere), quindi non importa se è nidificato o meno.

Answer 2

Il primo è il più veloce, semplicemente perché ha solo 1 proprietà da cercare. Tuttavia,

document.getElementById("MyElement") 

è anche più veloce. È javascript nativo e, a differenza di jQuery, il browser sa immediatamente cosa vuoi fare, invece di dover eseguire un carico di codice jQuery per capire che cosa stai cercando, in primo luogo.

È possibile utilizzare jsPerf per eseguire un test di velocità, per confrontare le funzioni: Test Case. Risultati:

$('#MyElement') 
Ops/sec: 967,509 
92% slower 

$('#Mytbl #MyElement') 
Ops/sec: 83,837 
99% slower 

$('#Mytbl .MyClass') 
Ops/sec: 49,413 
100% slower 

document.getElementById("MyElement") 
Ops/sec: 10,857,632 
fastest 

Come previsto, il getter nativo è il più veloce, seguito dal getter jQuery con solo 1 selettore a meno del 10% della velocità nativa. I getter jQuery con 2 parametri non si avvicinano nemmeno alle operazioni al secondo del codice nativo, in particolare il selettore di classe, poiché le classi sono generalmente applicate a più elementi, rispetto agli ID. (Selettori di ID nativi si fermano alla ricerca dopo che hanno trovato un elemento, non sono sicuro se jQuery fa, anche.)

Answer 3

Il più veloce sarà:

$('#Mytbl', '#MytblContainer');  

perché in questo caso, jquery don' Devo cercare nell'intero dom tree per trovare "#Mytbl". Effettua la ricerca solo nel campo di applicazione. IE verrà inserito solo in "#MytblContainer".

Answer 4

Ecco qui. Vedere i commenti sopra l'esempio:

//fastest because it is just one id lookup: document.getElementById("MyElement") with no further processing. 
$('#MyElement') 
//a little slower. JQuery interprets selectors from right to left so it first looks up for #MyElement and then checks if it is hosted in #Mytbl 
$('#Mytbl #MyElement') 
//the slowest of all. JQuery interprets selectors from right to left so it first finds all elements with .MyClass as their class and then searches for those hosted in #Mytbl. 
$('#Mytbl .MyClass') 

Se è possibile, utilizzare sempre e solo l'id (come il primo esempio), ma se si deve avere più selettori e classi incatenati insieme, provare a mettere la più rigorosa uno a destra. Ad esempio un id. Perché JQuery interpreta i selettori da destra a sinistra.

Answer 5

Direi che il primo è il più veloce perché stai semplicemente cercando un ID.

E

$('#Mytbl .MyClass') 

è il più lento perché non stai specificando il tipo di elemento che ha la classe "MyClass"

Answer 6

questo è il modo per fermare i tempi tra alcuni javascript chiama

selectorTimes = []; 
var start = new Date().getTime(); 
$('#MyElement') 
selectorTimes.push(new Date().getTime()-start); 

start = new Date().getTime() 
$('#Mytbl #MyElement') 
selectorTimes.push(new Date().getTime()-start); 

start = new Date().getTime() 
$('#Mytbl .MyClass') 
selectorTimes.push(new Date().getTime()-start); 

console.log(selectorTimes); 

Penso che il secondo selettore non sia efficiente, se si dispone di un domino selezionare direttamente: $ ('# MyElement')

Answer 7

Un paio di cose:

• più selettori = Ricerca più lenta. Se riesci a ottenere il risultato desiderato con meno predicati, fallo.
• Ottenere un elemento per ID è più veloce che ottenere da una classe. getElementById è una funzione fondamentale di JavaScript che è fortemente ottimizzata perché viene utilizzata così frequentemente. Usalo quando è possibile.
• Il selettore di spazio ('') è molto più costoso del selettore figlio ('>'). Se è possibile utilizzare il selettore di figlio, farlo.

Queste regole si applicano ai CSS come fanno JavaScript e jQuery.

Answer 8

Ovviamente il primo, $("#MyElement") è più veloce di altri 2.
Accesso a un elemento con il suo id sempre più veloce, ma a volte abbiamo dovuto trovare qualche elemento in qualche contenitore. In tal caso preferiamo .find() o .filter() (a seconda della situazione).
La differenza tra i selettori dipende dal browser al browser. per esempio. se si accede attraverso la classe su IE sarebbe più lento di FF. FF è più veloce quando si accede a un elemento con classe anziché ID.

Nel tuo secondo esempio, ad esempio $("#mytbl #MyElement"), qui trovi #MyElement sotto #mytbl che è legale ma non appropriato. Dal momento che conosci già l'ID dell'elemento (supponendo che tu abbia un solo elemento con questo ID sulla tua pagina) è quindi meglio usare $("#MyElement"). $("#mytbl #MyElement") leggerà #mytbl prima e attraverserà per trovare #MyElement al di sotto di esso, quindi richiede tempo e lento.

Per testare casi diversi è possibile scrivere piccoli snippet per leggere/accedere ad almeno 10000 elementi in un ciclo altrimenti sarebbe difficile determinare quale sia la via più veloce.

Answer 9

Inoltre, se avete bisogno di selettori nidificati, è più veloce da usare $(). Find(). Trovare()

http://jsperf.com/selector-test-id-id-id-id-class/2

$('#Mytbl .MyClass') 
$('#Mytbl').find('.MyClass') 

Quest'ultimo è circa il 65% più veloce.