改善jQuery选择器性能的好方法？

Question

我正在寻找任何可以改善jQuery调用的选择器性能的方法.特别是这样的事情:

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

我认为它可能是,但我不知道jQuery是否足够聪明,首先限制标签名称的搜索等等.任何人对如何制定jQuery选择器字符串以获得最佳性能有任何想法？

Answer 1

毫无疑问,首先按标签名称过滤要比按类名过滤快得多.

在所有浏览器本地实现getElementsByClassName之前都会出现这种情况,就像getElementsByTagName的情况一样.

Answer 2

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

$(".myclass", a_DOM_element);

应该比快

$(".myclass");

如果你已经有一个_DOM_element并且它明显小于整个文档.

Answer 3

为了充分理解更快的内容,您必须了解CSS解析器的工作原理.

您传入的选择器使用RegExp拆分为可识别的部分,然后逐个处理.

一些选择器如ID和TagName,使用浏览器的本机实现更快.虽然其他类似的类和属性是分开编程的,因此速度要慢得多,需要循环选择元素并检查每个类名.

所以是的回答你的问题:

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

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

由于所有javascript库都基于此,因此这比jQuery进一步传播.唯一的另一个选择是使用xPath,但目前在所有浏览器中都没有得到很好的支持.

Answer 4

正如Reid所说,jQuery是自下而上的.虽然

这意味着$('#foo bar div')慢很多$('bar div #foo')

这不是重点.如果你有,#foo你不会在选择器中放任何东西,因为ID必须是唯一的.

重点是:

• 如果你从带有ID的元素中选择任何东西,那么先选择后面的,然后再使用.find,.children等等:$('#foo').find('div')
• 您最左边(第一)选择的部分可以是效率较低缩放到最右边(最后)的一部分应该是最有效的-这意味着,如果你没有一个ID确保你正在寻找$('div.common[slow*=Search] input.rare'),而不是$('div.rare input.common[name*=slowSearch]')-因为这ISN" t始终适用确保通过相应的分割强制选择器顺序.