比较jQuery选择器的性能表现

Question

我想要提高jquery选择器的性能。你有没有什么技巧或文章可以帮助我找到最佳性能的jquery选择器？例如，如何选择一个div的id等。我能在网上提供html并比较不同的选择器来选择所需的元素。

- amateur

Answer 1

你可以在这里比较选择器的性能：http://jsperf.com/

只需设置您的HTML，包含jQuery，然后将每个要比较的选择器放置为一个测试用例。

许多这里的规则仍然适用，但是自jQuery 1.4.3+以后，Sizzle（jQuery的选择器引擎）会在支持它的浏览器中使用querySelectorAll()。

- Nick Craver

---

请注意，Sizzle 已经使用 querySelectorAll() 有一段时间了。它始终用于 document 上下文（即 nodeType == 9）。1.4.3 版本还将其用于元素节点（即 nodeType == 1）。 - Crescent Fresh

Answer 2

这篇文章详细介绍了jQuery选择器及其性能。它主要是关于正确使用jQuery。由于很多jQuery使用都围绕着选择器，所以本文花费了一些时间来介绍它们。

基本上有几点需要记住：

• 如果你想要更好的性能，使用委托到本地DOM检查方法（getElementById，getElementsByTagName）的选择器
• 缓存结果
• 伪选择器可能会影响性能。

- Vivin Paliath

---

一个问题，您是指在元素上使用id还是使用getElementById函数？ - KoU_warch

有一些jQuery选择器会委托给本地DOM检查方法。文章详细介绍了这一点。因此，如果您有一个最终委托给getElementById的选择器，那么它将执行得更快。 - Vivin Paliath

Answer 3

这些文章没有涉及的一点是您的起点。如果您从整个DOM树开始，那么这些文章实际上是有用的。

然而，如果您有一个元素作为起点，那么它取决于您的搜索内容。我在使用MVC模板的动态javascript中，通常会获取采取行动的元素，然后搜索父对象。这样可以消除在生成随机名称容器时需要唯一命名的需求——从动态开发的角度来看，这使事情变得更加轻松。

虽然寻找接近父节点可能不像查找ID那么快，但与生成和跟踪多个唯一ID的时间和/或性能相比，性能应该是可以忽略不计的。

就像开发中的所有事情一样，“它取决于”将在此处占主导地位。

- ps2goat

Answer 4

我注意到很多这种类型的问题都局限于比较不同jQuery选择器之间的性能。 最近，我看到一篇文章比较了jQuery选择器和它们的本地Javascript对应物。 虽然听起来可能有些麻烦，但性能提升相当大。实际上比我想象中的要更多。

Article: http://www.sitepoint.com/jquery-vs-raw-javascript-1-dom-forms/

- timo