在 jQuery 中查找元素的最有效方法

Most efficient way to find elements in jQuery

提问by nickf

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

如果我有一个只应用于表单元素的 CSS 类，例如：

<form class="myForm">

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

这两个 jQuery 选择器中哪个最有效，为什么？

a) $('form.myForm')

b) $('.myForm')

采纳答案by naktinis

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).

正如 redsquare 已经提到的，选择算法在以后的 jQuery 版本中发生了变化（部分原因是 getElementsByClassName 支持）。此外，我使用迄今为止最新的 jQuery 版本 (v1.6) 对此进行了测试，并添加了对 document.getElementsByClassName 的测试以进行比较（至少在 Firefox 4 和 Chrome 中有效）。

The results in Firefox 4 were:

在 Firefox 4 中的结果是：

// 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.

接受的答案已经过时（并且仍然可以通过搜索“在jquery中查找元素的有效方法”之类的东西找到）并且会误导人们，所以我觉得我必须写这个。

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

另外，看看 jQuery 和本机浏览器选择器函数之间的时间差异。在jQuery的1.2.6$('.myForm')超过300慢倍getElementsByClassName，而在jQuery的1.6是只有约20慢倍，但仍快于$('form.myForm')（与过时的答案）。

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.

注意：结果是使用 Firefox 4 获得的（Chrome 的结果类似）。在 Opera 10 中，使用标签名称查询只是稍微快一点，但 Opera 也支持更快的原生getElementsByClassName.

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

测试代码：http : //jsbin.com/ijeku5

回答by nickf

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.

编辑：以下结果适用于 jQuery 1.2.6，可能适用于 Firefox 3.5。浏览器和 jQuery 本身的速度改进几乎使这些信息过时了。

---

---

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%)

• 在一个包含 4 个表单和大约 100 个其他元素的页面上：
  • 使用$('form.myForm')10000 次需要 1.367s
  • 使用$('.myForm')10000 次需要 4.202s ( 307%)
• 在只有 4 个表单且没有其他元素的页面上：
  • 使用$('form.myForm')10000 次需要 1.352s
  • 使用$('.myForm')10000 次需要 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

编辑：这是我的测试程序：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.

程序以 100 个<p>标签和 4<form>秒开始，运行两个不同的测试，移除<p>标签并再次运行测试。奇怪的是，当使用这种技术时，form.myForm 会变慢。自己看一下代码，然后按照您的意愿进行编写。

回答by Matthew Crumley

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.

第一个选择器应该更快，因为 jQuery 可以使用内置函数“getElementsByTagName”来减少它需要过滤的元素数量。第二个必须获取 DOM 中的所有元素并检查它们的类。

回答by redsquare

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

尝试使用slickspeed，您可以在其中查看选择器在多个 js 库（包括 jquery）中的粗略速度。

回答by enobrev

The first example goes a LOT faster when used with a context. The second example goes faster as well, but not by much. I expanded your example to compare with a context:

当与上下文一起使用时，第一个示例会快很多。第二个示例也运行得更快，但速度并不快。我扩展了您的示例以与上下文进行比较：

http://jsbin.com/uluwe

http://jsbin.com/uluwe

回答by GONeale

form.myForm IMO is much quicker as it only needs to be look at a subset/filtered set of elements and would not need to iterate the whole document.

form.myForm IMO 更快，因为它只需要查看元素的子集/过滤器集，而无需迭代整个文档。

回答by redsquare

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

enobrev，有趣。我刚刚运行了你的例子，但在这里使用了 jquery 1.3 beta 2

results.... (1.2.6 speed in brackets)

结果......（括号内为1.2.6速度）

// 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)

回答by Ionu? Staicu

C'mon guys? Are you crazy? The most speedyway 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.

$('.myForm') 比 $('form.myform') 快得多，因为第二个变体必须进行额外检查以确保元素具有指定的 tagName。也许新的 jquery 1.3 会改变这件事，但在最新的稳定版本上，指定 tagName 也是错误的。你应该在这里阅读。

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.

我想我在某处读到 MooTools 这样更快。好吧.. 也许在 Moo 中，不知道，但在 jQuery 中，这是最快的方式。

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.

第一个只有 ID，第二个是 form#ID（在我的博客页面上测试）并且对于类选择器的工作完全相同。