jquery - jQuery 的范围更小，但性能更慢？

Question

我在这里创建了一个jsfiddle:http://jsfiddle.net/2tfbs/1/

既然底层循环中find的范围较小，为什么速度会慢很多呢？如果您更改 jQuery 版本，从 1.4.4 开始，性能会受到影响(Firefox 5 中影响很大)，但在所有版本中，结论基本相同。

如果将第一个循环更改为简单的 $('#container') 而不是缓存变量，结果也是相同的，并且似乎与我读到的“缓存更快”的内容相矛盾。

我做错了什么吗？我不明白发生了什么事。

编辑:来自 jsfiddle 的代码

html:

<div id="container">
    <div class="post">
        <div class="content">
            <span></span>
        </div>
        <div class="meta">
            <span></span>
        </div>
    </div>
    +2 more iterations of a post block
</div>

js:

//first loop
var $container = $('#container');
var i = 1000,
    a, start1 = new Date();
while (i--) {
    a = $container.find('div.content');
}
var end1 = new Date();
$('#one').text((end1 - start1) / 1000);

//second loop
var $post = $container.find('div.post');
var j = 1000,
    b, start2 = new Date();
while (j--) {
    b = $post.find('div.content');
}
var end2 = new Date();
$('#two').text((end2 - start2) / 1000);

Answer 1

因为您在第二个循环中针对多个元素运行 find()。

在第一个循环中，您的选择器匹配单个元素(您有一个#container)。在第二个循环中，您的选择器匹配多个元素(您有许多 div.content)。更多元素意味着更多匹配意味着更多循环。