jQuery 选择器性能：一个奇怪的案例

Posted 2023-03-05

【中文标题】jQuery 选择器性能：一个奇怪的案例

【英文标题】：jQuery selector performance : a curious case

【发布时间】：2013-06-01 04:32:42

【问题描述】：

我测试了2个ID选择器的区别，第一个是正常的：$('#lol') 第二个是相同的，但放在多个括号之间：$((((('#lol')))))

我在 jsperf 上使用 firefox 和 chrome 进行了测试。 结果很有趣： 使用 firefox，第一个（普通选择器）要慢 40%（！！！）。 使用 chrome，秒慢 0.84%。

为什么会有这样的差异？有人可以解释一下吗？

jsperf.com 可靠吗？

你可以在这里看到测试：

http://jsperf.com/ghshshsrd

为了好玩，我会在其他浏览器上测试。

（编辑：顺便说一下，我在 Mac OS X 上）

【问题讨论】：

也用歌剧和野生动物园测试过，没有真正的区别。只有firefox有这个奇怪的结果

如果你从 Firefox 浏览器运行测试，对我来说两者是相似的

我认为图中显示的投影结果是罪魁祸首

我测试了一遍又一遍，第二个还是比较好，但是差别比较小（最快8%）。不知道是我的firefox还是jsperf的问题。

如果你想测试$()，为什么要打电话给.html()？ .html() 调用将完全掩盖任何差异，如果有的话。

【参考方案1】：

正如其他人所指出的，这两个语句获得的结果之间的差异可以忽略不计。即使使用testing the same statement twice，您也不太可能产生两个相同的 Ops/sec 值。

还注意到您说的是“一个测试”，而不是“多个测试”。如果结果看起来很奇怪，只需重复测试 - 不要忘记，如果您的浏览器在测试运行的过程中部分资源不足，可能会出现异常结果。

JSPerf 对我来说一直很可靠 - 足以用于演示优化技术 (this being a classic example)。

【参考方案2】：

实际上，两种选择元素的方式并没有真正的区别（可读性除外）。 我创建了一个新的 jsperf 测试用例，它更客观地衡量了用例：

->http://jsperf.com/jquery-selector-performance-20130730

为什么你的测试结果如此奇怪？与两个测试之间的任何实际性能差异相比，您的测试场景更可能不准确

您可以颠倒初始测试的测试顺序：首先检查代码$(((('#lol'))))，然后检查$('#lol')。 我很确定你会得到与当前测试完全相反的结果；-)

我不是这方面的专家，但一方面，当今的浏览器非常智能，并且会缓存 javascript 代码/变量。 jQuery 也可能会在第一次调用后存储该值。