jQuery中使用选择器的最有效方法是什么？

Question

使用 $('.active') 还是 $('div.active') 更加高效？我一直避免使用 "div"，因为它会增加 JavaScript 文件中的额外文本，而我不希望用户必须下载。

- Ben

---

@BoltClock：我认为OP的意思是当所有可能具有“active”的元素都是<div>元素时，是否应该将div包括在选择器中。 - user113716

@patrick - 是的，那就是我的意思，谢谢你澄清。 - Ben

Answer 1

旧版IE浏览器将受益于包含div，因为它们不支持getElementsByClassName()。

因此，页面上的每个元素都需要使用以下方法进行选择：

document.getElementsByTagName('*');

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

如果包含div，则可以将其缩小一些范围，因为它可以执行以下操作：

document.getElementsByTagName('div');

如果只测试这些元素，请使用querySelectorAll。

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

---

编辑：

浏览器支持：

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

- user113716

---

另一方面，如果您通过标签名称选择元素，效率会降低。例如，$('#my_id')比$('div#my_id')更有效。原因基本相同 - 即使是像IE6这样过时的浏览器也有getElementById()方法。 - Kyle Humfeld

@Kyle：说得好。标签名不应该与 id-selector 一起使用。 - user113716

Answer 2

这要看情况而定。如果你指的是性能问题，我为大家准备了一个特殊测试：JSPerf: jquery class selector test。

在我的浏览器和电脑上（FF 3.6.13 和 Core 2 Duo 1.6），使用 div.active 略慢一些。但是表现不稳定——似乎垃圾回收有些干扰。

进行了更多测试之后，div.active 的表现如下：

• 在 Firefox 上，速度变化不定，有时候会有垃圾回收的影响，但总体差别很小。
• 在 Chrome 和 Safari 上无明显差异。
• 在 IE9 上表现更加快速。

- gertas

---

当我运行测试几次时，div.active 几乎总是稍微快一点，尽管每次的差异都是微不足道的。 - user113716

我使用了和你一样的FF版本。我还在Safari中进行了测试。（我尝试了Chrome，但是由于某些原因JavaScript失败了。）当结果非常接近时，你需要运行测试多次以获得更加平衡的结果。 - user113716

Answer 3

我喜欢在代码中包含标签名称，以帮助自我记录。 如果可以使用

$("nav.primary") 

而不是

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

我倾向于这样做。

- Elliott

---

如果时间差可以忽略不计，那么我认为这种方法非常可靠。当然，如果您以后更改代码，就必须在两个地方进行更改，但在我看来，这种缺点是值得的。 - Kyle Humfeld

Answer 4

我想在大型页面上获得更快的速度，最好的方法是使用查找。

$(your-container).find("div.active")

由于您总是知道应该在哪里查找，因此可以创建自己的范围。这样，浏览器只需要在代码的那个区域内搜索即可。

顺便说一句，您永远不需要关心CSS的大小 :) 在生产模式下，使用CSS缩小工具来最小化CSS。您还可以设置Web服务器，在将其发送给用户之前自动压缩CSS文件。如果您不在每个页面加载时更改CSS文件名，则浏览器会缓存整个CSS文件。

- Jhonte

Answer 5

CSS选择器在jQuery中的优化与浏览器类似，详情请参见：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 中，由于这些选择器可能会在页面的生命周期内运行成千上万次，所以我更加小心。

- scragz