具有上下文的jQuery选择器的性能

Question

我读这篇文章由布兰登·艾伦在这里,关于jQuery的背景下可能会怎样帮助.所以我想做一个自己的测试.所以这就是我所做的.

1. 在前面创建的"#context"中创建了一个id ="context"的DIV和嵌套的DIV,id ="holder".

2. 创建了深度为18的嵌套DIV并附<div id="context"><div id="holder"></div></div>加到其上,从而生成20个嵌套DIV

3. 现在我测试了通过以下选择器访问"#holder"所花费的时间:
   a.$("#holder") // no context
   湾 $("#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-32毫秒[jquery-1.3.2]
   情况(b)+(c)分别具有60-65毫秒和70-75毫秒的最高时间
   (d) )有40到50毫秒,有1或2个加标值.
   

这种基本检查有效吗？你可以用JS代码打这里的JSBIN.[让我知道如果我可以改进这个测试一些如何]
如果是,那么这个'背景'真的有用吗？

#NOTE:在jsbin编辑模式下用jquery-1.4.2替换jquery-1.3.2,你会惊讶地看到数字突然增加:P

Answer 1

当你有一个更大的DOM搜索时,上下文真的很有帮助.搜索ID已经非常快,在这种情况下,上下文并没有真正帮助那么多.当您通过标签名称或类别进行选择时,上下文确实可以产生影响.

尝试这样的测试:http://jsbin.com/aciji4/4

当你在DOM中增加项目数量时,你可以真正看到时间变得更好的上下文:http://jsbin.com/aciji4/6