提高 jQuery 选择器性能的好方法？

Question

我正在寻找任何可以提高 jQuery 调用的选择器性能的方法。具体是这样的：

是 $("div.myclass") 比...快 $(".myclass")

我认为可能是这样，但我不知道 jQuery 是否足够聪明，可以首先通过标签名称限制搜索，等等。有人知道如何制定 jQuery 选择器字符串以获得最佳性能吗？

Answer 1

这点毋庸置疑 首先按标签名称过滤要快得多 而不是按类名过滤。

在所有浏览器都原生实现 getElementsByClassName 之前，情况都会如此，就像 getElementsByTagName 的情况一样。

Answer 2

在某些情况下，您可以通过限制查询的上下文来加快查询速度。如果您有元素引用，则可以将其作为第二个参数传递以限制查询的范围：

$(".myclass", a_DOM_element);

应该比

$(".myclass");

如果您已经有 a_DOM_element 并且它比整个文档小得多。

Answer 3

正如 Reid 上面所说，jQuery 是自下而上工作的。虽然

这意味着 $('#foo bar div') 比 $('bar div #foo')

这不是重点。如果你有 #foo 无论如何，您不会在选择器中在它之前放置任何内容，因为 ID 必须是唯一的。

重点是：

• 如果您要从具有 ID 的元素中子选择任何内容，请先选择后者，然后使用 .find, .children ETC。： $('#foo').find('div')
• 选择器的最左边（第一个）部分 能 缩放到最右边（最后）部分的效率较低 应该 成为最高效的 - 这意味着如果您没有 ID，请确保您正在寻找 $('div.common[slow*=Search] input.rare') 而不是 $('div.rare input.common[name*=slowSearch]') - 因为这并不总是适用，所以请确保通过相应的拆分来强制选择器顺序。

Answer 4

为了完全理解什么是更快，您必须了解 CSS 解析器的工作原理。

您传入的选择器会使用 RegExp 分成可识别的部分，然后逐个进行处理。

一些选择器（例如 ID 和 TagName）使用浏览器的本机实现，速度更快。而其他类（如类和属性）是单独编程的，因此速度要慢得多，需要循环遍历选定的元素并检查每个类名称。

所以是的，回答你的问题：

$('tag.class') 比 $('.class') 更快。为什么？对于第一种情况，jQuery 使用本机浏览器实现将选择过滤为仅您需要的元素。只有这样，它才会启动较慢的 .class 实现，过滤到您所要求的内容。

在第二种情况下，jQuery 使用它的方法通过抓取类来过滤每个元素。

它比 jQuery 传播得更远，因为所有 javascript 库都基于此。唯一的其他选择是使用 xPath，但目前并非所有浏览器都很好地支持它。

Answer 5

以下是提高 jQuery 选择器性能的方法：

• 尽可能按 #id 选择（性能测试结果 快约 250）
• 指定您的选择范围（$('.select', this))

Answer 6

我要补充一点，在 99% 的 Web 应用程序中，甚至是 Ajax 密集型应用程序，Web 服务器的连接速度和响应将驱动应用程序的性能，而不是 JavaScript。我并不是说你应该故意编写缓慢的代码，或者通常意识到哪些事情可能比其他事情更快是不好的。

但我想知道您是否正在尝试解决一个尚不存在的问题，或者即使您正在针对可能存在的问题进行优化 改变 在不久的将来（比如说，如果更多的人开始使用支持 getElementsByClassName() 前面提到的函数），使优化后的代码实际上运行得更慢。

Answer 7

另一个寻找性能信息的地方是 Hugo Vidal Teixeira 的选择器性能分析页面。

http://www.componenthouse.com/article-19

这可以很好地降低按 id 选择器、按类选择器和添加前缀标记名称的选择器的速度。

按 id 最快的选择器是：$("#id")

按类别最快的选择器是：$('标签.class')

因此，按标签添加前缀仅在按类别选择时有帮助！

Answer 8

我去过一些 jQuery 邮件列表，从我在那里读到的内容来看，他们很可能先按标签名称过滤，然后按类名称过滤（或者反之亦然，如果速度更快的话）。他们对速度非常着迷，会不惜一切代价来获得一点点的表现。

无论如何，我真的不会太担心它，除非您每秒运行该选择器数千次。

如果您真的很担心，请尝试进行一些基准测试，看看哪个更快。

Answer 9

考虑使用 Oliver Steele 的 Sequentially 库随时间调用方法，而不是一次性调用所有方法。

http://osteele.com/sources/javascript/sequentially/

“最终”方法可帮助您在初始调用后经过一定时间后调用该方法。“顺序”方法允许您在一段时间内对多个任务进行排队。

很有帮助！

Answer 10

A 很棒的小费 来自我问的一个问题：使用 标准 CSS 选择器 只要有可能。这允许 jQuery 使用 选择器API. 。根据 约翰·雷西格 (John Resig) 进行的测试, ，这会导致选择器接近本机的性能。功能如 :has() 和 :contains() 应该避免。

根据我的研究，jQuery 1.2.7、Firefox 3.1、IE 8、Opera 10、Safari 3.1 引入了对 Selectors API 的支持。

Answer 11

如果我没记错的话，jQuery 也是一个自下而上的引擎。这意味着 $('#foo bar div') 比慢很多 $('bar div #foo'). 。例如， $('#foo a') 将经历所有的 a 页面上的元素并查看它们是否有祖先 #foo, ，这使得这个选择器效率极低。

Resig 可能已经针对这种情况进行了优化（如果他这样做了，我也不会感到惊讶 - 我相信他在他的 Sizzle 引擎中做到了，但我不能 100% 确定。）

Answer 12

我相信首先通过 ID 选择总是更快：

$("#myform th").css("color","red");

应该比

$("th").css("color","red");

但是，我想知道从 ID 开始时链接有多大帮助？这是

$("#myform").find("th").css("color","red")
.end().find("td").css("color","blue");

还有比这更快的吗？

$("#myform th").css("color","red");
$("#myform td").css("color","blue");