Most efficient way to find elements in jQuery

Question

If I have a CSS class which I only ever apply to form elements, eg:

Which of these two jQuery select

Answer 1

The first selector should be faster because jQuery can use the built-in function "getElementsByTagName" to reduce the number of elements it needs to filter. The second one has to get all the elements in the DOM and check their class.

Answer 2

C'mon guys? Are you crazy? The most speedy way to select an element is the shortest way:

$('.myForm') is way faster than $('form.myform') because the second variant hast to do aditional check to make sure that the element has the specified tagName. MAYBE the new jquery 1.3 will change this thing, but on latest stable version, is wrong to specify the tagName too. You should read here.

I think i read somewhere that MooTools is way faster this way. Well.. Maybe in Moo, don't know, but in jQuery this is the fastest way.

take a look at this profiler:

(big pic)

first is only with ID, second is with form#ID (tested on my blog page) and work exactly same for class selector.

Answer 3

Edit: The results below are for jQuery 1.2.6, probably in Firefox 3.5. Speed improvements in browsers and jQuery itself have pretty much rendered this information obsolete.

---

I just wrote a quick benchmarking test:

• On a page with 4 forms and about 100 other elements:
  • Using $('form.myForm') 10000 times took 1.367s
  • Using $('.myForm') 10000 times took 4.202s (307%)
• On a page with only 4 forms and no other elements:
  • Using $('form.myForm') 10000 times took 1.352s
  • Using $('.myForm') 10000 times took 1.443s (106%)

It appears that searching for elements of a particular name is much quicker than searching all elements for a particular class.

Edit: Here's my test program: http://jsbin.com/ogece

The program starts with 100 <p> tags and 4 <form>s, runs the two different tests, removes the <p> tags and runs the test again. Strangely, when using this technique, form.myForm is slower. Take a look at the code for yourself and make of it what you will.

Answer 4

enobrev, Interesting. I just ran your example but using jquery 1.3 beta 2 here

results.... (1.2.6 speed in brackets)

// With 100 non-form elements and Context:
$('.myForm', '#someContainer') : 4063ms (3707ms)
$('form.myForm', '#someContainer') : 6045ms (4644ms)

// With 100 non-form elements: 
$('.myForm') : 3954ms (25086ms)
$('form.myForm') : 8802ms (4057ms)

// Without any other elements with Context: 
$('.myForm', '#someContainer') : 4137ms (3594ms)
$('form.myForm', '#someContainer') : 6627ms (4341ms)

// Without any other elements: 
$('.myForm') : 4278ms (7303ms) 
$('form.myForm') : 8353ms (4033ms)

Answer 5

Try slickspeed where you can see the rough speeds of selectors across a multiple of js libs including jquery.

Answer 6

As redsquare already mentioned, the selection algorithm changed in later jQuery versions (partly due to getElementsByClassName support). Additionally, I tested this with the most recent jQuery version to date (v1.6) and also added a test for document.getElementsByClassName for comparison (works at least in Firefox 4 and Chrome).

The results in Firefox 4 were:

// With 100 non-form elements:
$('.myForm') : 366ms
$('form.myForm') : 766ms
document.getElementsByClassName('myForm') : 11ms

// Without any other elements:
$('.myForm') : 365ms
$('form.myForm') : 583ms
document.getElementsByClassName('myForm') : 11ms

The accepted answer is outdated (and is still found by searching for something like "efficient way to find elements in jquery") and can mislead people, so I felt that I have to write this.

Also, take a look at the time difference between jQuery and native browser selector functions. In jQuery 1.2.6 $('.myForm') was more than 300 times slower than getElementsByClassName, while in jQuery 1.6 it was only about 20 times slower, but still faster than $('form.myForm') (contrary to the outdated answer).

Note: The results were obtained with Firefox 4 (similar results with Chrome). In Opera 10 querying with tag name is only slightly faster, but Opera also supports the much faster native getElementsByClassName.

Test code: http://jsbin.com/ijeku5