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. 否缓存 - 7284 OPS /秒​​ - 92％比较慢，最慢的
2. 链接 - 10284个OPS /秒​​ - 95968 OPS /秒​​ - - 速度较慢
3. 对象缓存89％最快
4. 对象缓存+链接 - 10353 OPS /秒​​ - 慢89％
5. 普通的jQuery - 10172 OPS /秒​​ - 慢89％

（这些结果符合与其他浏览器进行的测量。）

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

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

你有没有在你自己的浏览器上注意到这一点？

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

您认为如何？

Answer 1

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

它使用与其他选择器不同的选择器：.myDiv而不是.myClass。没有.myDiv元素，因此这些调用正在执行一个空的结果集。

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