jQuery选择器：$（'＃ID1，＃ID2，＃ID3'）vs $（'1X CLASS'）哪个更快？

Question

调查$（'＃ID1，＃ID2，＃ID3'）与$（'1X CLASS'）之间的选择器性能。哪个更快？

Answer 1

对于这种情况，.class看起来效果更快。 jQuery可能不会进入getElementById路由。 Chrome和Safari可能正在使用getElementsByClassName进行优化。

测试@ http://jsfiddle.net/mGqyH/4/

铬

Chrome http://img339.imageshack.us/img339/5021/chromew.png

---

Safari浏览器

alt text http://img339.imageshack.us/img339/5021/chromew.png

---

火狐

Firefox performance http://img94.imageshack.us/img94/1123/firefoxg.png

<小时/> 使用的文件（修改）

http://www.w3.org/TR/DOM-Level-2-Events/events.html

组合ID选择器

$("#Events, #table-of-contents, #Events-overview, #Events-flow-capture, #Events-EventTarget, #Events-EventListener")

不相交的ID选择器

$("#Events").add("#table-of-contents").add("#Events-overview").add("#Events-flow-capture").add("#Events-EventTarget").add("#Events-EventListener");

类选择器

$(".selectMe")

Answer 2

如果你想要表现，请改用它：

$("#id1").add("#id2").add("#id3")

这里要做的字符串解析较少。这应该比通过类名选择更快，除非浏览器具有本机实现（有些）。

Answer 3

通常，搜索id是由getElementbyId完成的，这是选择DOM元素的最快方法。如果可用，则使用getElementByClass按类名抓取节点。

同样，getElementById是最快的方式。对一个getElementByClass执行三次getElementById需要一些基准测试来找出速度差异。

但如果浏览器不支持getElementByClass，那就更慢了。

Answer 4

使用.add方法更新http://jsfiddle.net/uD7Qz/1/。

在Chrome上，

.add方法几乎和$（.class）一样快。在FireFox上，它比$（“＃1，＃2，＃4”）快4倍。

至少那些是我的结果。

Answer 5

正如猜测一样，我会说按ID选择更快，因为document.getElementByID()是javascript的内置函数，而'getElementByClass（）'是构建各种自定义函数来解决的问题。理想情况下，寻找$('div#id')会更快，因为它更具体，并允许搜索循环切出某些无法回复正面的路径。

Answer 6

jQuery选择器的工作原理与CSS选择器的原理相同（广义语句不是一个确切的事实）。在CSS中，id选择器与类选择器相比更快。所以$（“＃myDiv”）更多比＃（“。myDivClass”）快。