在jQuery中使用选择器的最有效方法？

Question

使用$('.active')或$('div.active')效率更高？我一直避免使用“div”，因为它是javascript文件中的额外文本我不希望用户必须下载。

Answer 1

旧版本的IE将受益于div的加入，因为它们不支持getElementsByClassName()。

因此，页面上的每个元素都需要选择：

document.getElementsByTagName('*');

...并手动测试以查看它是否具有active类。

如果你包含div，那么它可以缩小一点，因为它可以做到：

document.getElementsByTagName('div');

...然后只测试那些元素。

当我说旧版本时，我的意思是IE6和IE7，因为IE8 +支持querySelectorAll。

---

修改

浏览器支持：

• getElementsByClassName：http://www.quirksmode.org/dom/w3c_core.html#t11
• querySelectorAll：http://www.quirksmode.org/dom/w3c_core.html#t13

Answer 2

这取决于。如果你的意思是表现。 我为JSPerf: jquery class selector test的每个人准备了特别测试。 在我的浏览器和计算机上（FF 3.6.13和Core 2 Duo 1.6）div.active有点慢。但发现它变量 - 似乎GC在这里有所作为。

经过几次测试后，似乎div.active：

• 速度在FF上是可变的，有时GC打开'div.active'测试，但通常差异非常小。
• Chrome和Safari上的不明显差异
• IE9更快

Answer 3

我喜欢包含标记名称，如果它有助于自我记录代码。如果我可以使用

$("nav.primary") 

而不是

// this is the primary nav
$(".primary")

我倾向于这样做。

Answer 4

我想在大页面上获得速度的最佳方法是使用find。

$（你的容器）.find（“div.active”）

既然你永远？知道你应该在哪里看，你可以创建自己的范围。这样浏览器只需要在该代码区域内进行搜索。

顺便说一句，你不需要关心css的大小，永远:) 使用css minifing工具在站点处于生产模式时最小化css。您还可以将Web服务器设置为在发送给用户之前自动gzip您的css文件。如果你不在每个页面加载上更改你的css文件名，浏览器会缓存到整个css文件。

Answer 5

jQuery中的CSS选择器过去经过优化，与浏览器的方式类似，请参阅：http://css-tricks.com/efficiently-rendering-css/

在任何地方指定通用标记，即使使用ID或类，也会比单独指定ID或类要慢得多。参见：

http://www.no-margin-for-errors.com/demos/how-to-optimize-jquery-selectors/

以上使用jQuery 1.3。自从jQuery 1.4和Sizzling选择器引擎的引入以来，根据我的理解，这并不重要。参见：

http://hungred.com/useful-information/jquery-optimization-tips-and-tricks/

对于我自己，我决定在CSS中使用最简单的读取，我更具体，因为它只被解析一次。然而，在jQuery中，我更加小心，因为这些选择器可以在页面的整个生命周期内运行数千次。