2013-06-04 14 views
5

Sto leggendo un libro e mostrano un paio di esempi su come selezionare gli elementi sul DOM, ma si consiglia di utilizzare sempre i metodi di attraversamento di Jquery sui selettori, ad esempio se si dispone di un elenco all'interno di un div invece di utilizzareJquery che attraversa e utilizza i selettori

$("#myList > li") 

si dovrebbe usare

$("#myList").children("li") 

maggior parte del tempo che uso il primo sul secondo, l'autore dice il secondo è preferito e più efficiente ma non affronta perché, qualcuno può spiegare la ragione di questo?

+0

Se sei interessato alle prestazioni, non dovresti usare jQuery. Usa ciò che è più chiaro per te. – Bergi

+0

possibile duplicato di [performance selettore jQuery] (http://stackoverflow.com/questions/1411143/jquery-selector-performance) – Bergi

+2

[Leggi questo] (https://developers.google.com/speed/docs/best- pratiche/rendering? hl = fr-FR # UseEfficientCSSSelectors) 'I selettori secondari e adiacenti sono inefficienti perché, per ogni elemento corrispondente, il browser deve valutare un altro nodo. Diventa doppiamente costoso per ogni selezionatore di bambini nella regola. Di nuovo, meno specifica è la chiave, maggiore è il numero di nodi che devono essere valutati. Tuttavia, mentre sono inefficienti, sono comunque preferibili ai selettori discendenti in termini di prestazioni. –

risposta

5

Penso che la differenza di prestazioni in quel caso specifico si riduce a questo:

document.querySelectorAll('#myList > li'); 
// VS 
document.getElementById('myList').children; 

E la prova di prestazione qui: http://jsperf.com/ae-d2-56-2a-e2-36-a3-d3-52-74

jQuery potrebbe controllare per vedere se si tratta di un li dato il selettore di ma sarà ancora più veloce di querySelectorAll o Sizzle.

+0

È interessante notare che in Opera il selettore nativo è circa il 50% più veloce :-) – Bergi

+0

@Berg: Presto! Ora lampeggia due volte ... – elclanrs

+1

jsperf non è mele-mele, perché non filtra i bambini per nome del tag. Fatto ciò, risulta che 'querySelectorAll' è il più veloce. Vedi jsperf modificato. –