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

Question

如果我有一个CSS类，我仅仅将它应用到表单元素上，例如：

<form class="myForm">

哪个 jQuery 选择器更高效，为什么？

a) $('form.myForm')

b) $('.myForm')

- nickf

Answer 1

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

我刚刚写了一个快速的基准测试：

- 在一个包含 4 个表单和约 100 个其他元素的页面上: - 使用 $('form.myForm') 搜索 10000 次共计 1.367 秒。 - 使用 $('.myForm') 搜索 10000 次共计 4.202 秒（307%）。 - 在一个只有 4 个表单且没有其他元素的页面上： - 使用 $('form.myForm') 搜索 10000 次共计 1.352 秒。 - 使用 $('.myForm') 搜索 10000 次共计 1.443 秒（106%）。

看来按名称搜索元素比搜索特定类的所有元素要快得多。 编辑： 这是我的测试程序：http://jsbin.com/ogece 该程序从 100 个 <p> 标签和 4 个 <form> 开始运行两个不同的测试，然后删除 <p> 标签并再次运行测试。奇怪的是，使用这种技术时，form.myForm 比较慢。看看代码并自行判断吧。

- nickf

---

也许在 pastebin.me 或 jsbin.com 上提供测试用例，NickF？ - redsquare

可能还取决于浏览器以及本地支持哪些CSS选择器。 - El Yobo

Answer 2

如 redsquare 已经提到的那样，选择算法在后来的 jQuery 版本中发生了改变（部分原因是由于 getElementsByClassName 的支持）。此外，我在最新的 jQuery 版本（v1.6）上进行了测试，并添加了一个用于比较的 document.getElementsByClassName 测试（至少在 Firefox 4 和 Chrome 中有效）。

在 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

被接受的答案已经过时了（并且仍然通过搜索类似于“在jquery中查找元素的有效方法”来找到），这可能会误导人们，所以我觉得我必须写下这篇文章。

此外，请看一下jQuery和本地浏览器选择器函数之间的时间差异。在jQuery 1.2.6中，$('.myForm') 比 getElementsByClassName 慢300多倍，而在jQuery 1.6中，它只比 $('form.myForm') 慢约20倍（与过时的答案相反），但仍然比后者更快。

注意：这些结果是使用Firefox 4获得的（使用Chrome也可以得到类似的结果）。在Opera 10中，按标签名查询只稍微快一点，但Opera还支持更快的本地 getElementsByClassName。

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

- naktinis

Answer 3

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

- Matthew Crumley

Answer 4

试试slickspeed，你可以看到包括jquery在内的多个js库的选择器速度。

- redsquare

---

很酷的网站！jQuery胜利了！但是，它没有测试.className与tagName.className的区别 :( - nickf

Answer 5

form.myForm 在我的看法中更快，因为它只需要查看子集/过滤集合中的元素，而不需要迭代整个文档。

- GONeale

Answer 6

第一个例子在使用上下文时会非常快。第二个例子也会更快，但差别不大。我扩展了您的示例以与上下文进行比较：

http://jsbin.com/uluwe

- enobrev

Answer 7

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

结果...（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)

- redsquare

---

哇，忘记1.3的上下文了！！此外，第二个测试的差异相当大（在版本之间）。看起来jquery在form.myForm方面失去了一些速度，但对于.myForm的巨大增益可能会在整体上产生更大的影响。 - enobrev

Answer 8

大家，你们疯了吗？选择元素最快的方法是最短的方法：

$('.myForm') 比 $('form.myform') 快得多，因为第二种方式必须进行额外的检查，以确保元素具有指定的标记名称。也许新的 jQuery 1.3 版本会改变这个问题，但在最新的稳定版本中，指定标记名称是错误的。你应该在这里阅读。

我想我在某个地方读到 MooTools 这样做更快。嗯...也许在 Moo 中是这样，但在 jQuery 中，这是最快的方法。

看看这个分析器：

(大图)

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

- Staicu Ionut

---

通过标签名称搜索元素比通过类名搜索元素更快。form.myForm意味着您只需要搜索较小的元素子集。如果您只有几个元素，则需要进行两次搜索，这可能会更慢，但在实际应用中，form.myForm胜出。 - nickf

看一下分析器的结果（或者进行自己的测试），然后告诉我这个。此外，甚至John Resig也确认了这一点 ;) - Ionuț Staicu

检查并更改您的测试以使用.class选择器。您将看到差异。 - redsquare

我简直不敢相信最完整的回复获得了负面评价，而最错误的却获得了两个赞。无论如何，如果能给我一些关于这个负评的理由就好了... - Ionuț Staicu

只需阅读以下帖子并转到讨论的链接即可查看。.class 比 element.class 慢http://jsbin.com/uluwe - redsquare