jQuery变量缓存和链接的奇怪性能

Question

我到处都读过变量缓存和链接jQuery函数调用对性能有好处。

然而，我遇到了this jsperf test似乎表现出一些有趣的怪癖。

请参阅以下测试用例：

案例1：无缓存

$(".myClass").css("color", "red");
$(".myClass").css("opacity", 1);
$(".myClass").css("display", "block");

案例2：链接

$(".myClass").css("color", "red").css("opacity", 1).css("display", "block");

案例3：对象缓存

var $myDiv = $(".myDiv");
$myDiv.css("color", "red");
$myDiv.css("opacity", 1);
$myDiv.css("display", "block");

案例4：对象缓存+链接

var $myDiv = $(".myClass");
$myDiv.css("color", "red").css("opacity", 1).css("display", "block");

案例5：正常的jQuery

$(".myClass").css({
  color: "red",
  opacity: 1,
  display: "block"
});

以下是我的计算机（Win7 FF18）按测试用例排序的性能测试结果：

1. 无缓存 - 7,284次/秒 - 慢92％，最慢
2. 链接 - 10,284次操作/秒 - 慢89％
3. 对象缓存 - 95,968次/秒 - 最快
4. 对象缓存+链接 - 10,353次操作/秒 - 慢89％
5. 普通jQuery - 10,172次操作/秒 - 慢89％

（这些结果与其他浏览器的测量值一致。）

如您所见，测试用例1是预期的最慢的。 奇怪的是，测试用例3是最快的，而测试用例2,4和5也很慢。

最大的惊喜是测试用例3比测试用例4快得多。换句话说，链接jQuery调用会大大降低性能。

您是否在自己的浏览器中注意到了这一点？

也许这是.css（）方法的好处，但就个人而言，我认为现代Javascript引擎已经进行了特殊的代码优化，以增强来自同一根对象的函数调用序列。

您怎么看？

Answer 1

“对象缓存”测试速度快得多，因为它实际上并没有做任何事情。

它使用的选择器与其他选择器不同：.myDiv而不是.myClass。没有.myDiv个元素，因此调用对空结果集起作用。

如果你fix that broken test，你会得到更像你期望的结果：重复选择器仍然是最慢的，其他4个选项或多或少都是等效的，速度方面。