Most efficient way to find elements in jQuery

Question

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

<form class="myForm">

Which of these two jQuery selectors is most efficient, and why?

a) $('form.myForm')

b) $('.myForm')

Answer 1

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 2

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