Saturday, June 1, 2024
 Popular · Latest · Hot · Upcoming
87
rated 0 times [  93] [ 6]  / answers: 1 / hits: 22900  / 13 Years ago, tue, december 6, 2011, 12:00:00

I am using jQuery 1.7.1 and I'm trying to find out why the following code takes 4600 MS, if I change the :eq(0) to :first it is the same result.



$(tr:eq(0) td); // x10000 takes 4600ms
$(tr).eq(0).find(td); // x10000 takes 470ms


The second codes is almost 10 times as fast! And it's only written differently.



Also if I use a selector like, just selecting an ID or looking within a node:



someparent.find(#test) // x10000 takes 500ms
$(#test) // x10000 takes 100ms
$(div#test) // x10000 takes 470ms


I would say, if I pass an div#test would be faster than #test but it is 5 times slower. Why?



I have done all runs a couple of times and it is real slow if I do the same thing different.



Why is using the selector slower then using functions?


More From » jquery

 Answers
59

Answer right from the horse's mouth:




Additional Notes:



Because :eq() is a jQuery extension and not part of the CSS specification, queries using :eq()
cannot take advantage of the performance boost provided by the native DOM querySelectorAll()
method. For better performance in modern browsers, use
$(your-pure-css-selector).eq(index) instead.




I should add that the aforementioned querySelectorAll API is supported in all modern browsers, so it can be indiscriminately used as a drop-in replacement for getElementById etc.


[#88722] Monday, December 5, 2011, 13 Years  [reply] [flag answer]
Only authorized users can answer the question. Please sign in first, or register a free account.
ellisw

Total Points: 625
Total Questions: 92
Total Answers: 88

Location: Kazakhstan
Member since Mon, Sep 26, 2022
2 Years ago
ellisw questions
Mon, Aug 23, 21, 00:00, 3 Years ago
Fri, Nov 20, 20, 00:00, 4 Years ago
Sat, Jun 20, 20, 00:00, 4 Years ago
Tue, Apr 21, 20, 00:00, 4 Years ago
;