代码之家 › 专栏 › 技术社区 › Ajaxe

带有上下文的jquery选择器的性能

performance jquery-selectors jquery

Ajaxe · 技术社区 · 14 年前

我在读布兰登·艾伦的这篇文章 here ,关于jquery上下文的帮助。所以我想自己做个测试。这就是我所做的。

在先前创建的“context”中创建了一个id=“context”的DIV和id=“holder”的嵌套DIV。
创建深度为18的嵌套div并附加 <div id="context"><div id="holder"></div></div> 对它产生20个嵌套的div
现在,我测试了通过以下选择器访问“holder”所用的时间:
a. $("#holder") // no context
B. $("#holder", "#context") // with "#context" selector string
C. $("#holder", $("#context")) // sending jquery object each time with selector "#context"
d. $("#holder", $context) // where, var $context = $("#context"). Caching jquery obj
访问的每个案例 X = 1000 记录时间和开始和结束时间差异。我发现花费的时间是:
案例(a)是最不一致的28-32msec[jquery-1.3.2]
病例(b)+(c)的最高时间分别为60-65 ms和70-75 ms。
病例(d)有40-50msec,1或2个峰值。

这种基本检查有效吗?你可以玩JS代码 here 在JSbin。 [一定要告诉我,如果我能提高这个测试的一些方法]
如果是,那么这个“上下文”到底有什么帮助?

#注意:在jsbin编辑模式下,也可以将jquery-1.3.2替换为jquery-1.4.2,您会惊讶地发现这些数字会增加:p

6 回复 | 直到 11 年前

PetersenDidIt 14 年前

当您有一个要搜索的更大的DOM时,上下文真的很有帮助。在这种情况下,搜索ID已经很快了,上下文并没有太大帮助。上下文真正起作用的地方是,当您按标记名或类选择时。

当您像这样在DOM中增加项目数时,您可以看到上下文的时间安排变得更好: http://jsbin.com/aciji4/6

Coronus 14 年前

使用上下文(而不是单独使用选择器)可能需要更长的时间,因为在内部,上下文使用.find()方法,所以本质上,您真正要做的就是

$('#context').find('#holder');

我主要把它看作是识别事件和迭代器中上下文变化的元素的一种简单方法,因为

$('.holder', this)

比…更漂亮

$(this).find('.holder')

Dave Ward 14 年前

ID选择器依赖于浏览器本机document.getElementByID。不管怎样都会很快。

尝试使用类似DIV.Class[attribute=value]的选择器,无论使用上下文还是不使用上下文。例如*,您可以使用此选择器选择右侧的“相关”问题链接:

// Selects anchor elements with href's beginning with /questions/
$('a[href^=/questions/]')

但是,限制选择器引擎必须重复的锚定元素的数量更快,从而评估相对昂贵的文本匹配:

$('a[href^=/questions/]', '.related')

*为了讨论,忽略那些链接上明显更简单的问题超链接类。

jonsca 12 年前

为了它的价值, $context = $("#context") 仍在使用jquery对象,然后必须将其转换为dom对象。

如果你使用 $context = $("#context")[0] 你会发现它和第一次测试一样快。

GT. 11 年前

在重构代码之前要小心。正如所写的注释,jquery自1.4以来的工作方式完全不同。最新版本可能包含更多优化。

我修改了上面的jsbin代码以获得最近的jquery,并添加了一些额外的案例。您将看到,现在只有这三个(2,3,6)案例会受到性能惩罚,这会在每一轮中再创建一个jquery对象。休息时间差不多。

您可以在此处找到修改后的版本: http://jsbin.com/aciji4/63/

Steve Workman 13 年前

我已经把jsbin代码放到 jsPerf Test

$context.find(“.holder”)是 两倍快 作为其最接近的竞争对手,$('.holder',$context),这是一个很好的 快十倍 比正在使用的任何其他选择器。

总之,缓存选择器并使用.find()以获得最佳性能