jQuery變量緩存和鏈接的奇怪性能

Question

我到處都讀到了變量緩存和鏈接jQuery函數調用對性能有好處。

但是，我遇到了這個jsperf測試 ，似乎證明了一些有趣的怪癖。

請查看以下測試案例：

情況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 ops / s-慢89％
3. 對象緩存-95,968 ops / s-最快
4. 對象緩存+鏈接-10,353 ops / s-慢89％
5. 普通jQuery-10,172 ops / s-慢89％

（這些結果與其他瀏覽器的測量結果一致。）

如您所見，測試用例1是預期中最慢的。 奇怪的是，測試用例3最快，而測試用例2、4和5也很慢。

最大的驚喜是測試用例3比測試用例4快得多。換句話說，鏈接jQuery調用大大降低了性能。

您在自己的瀏覽器中注意到了嗎？

也許這是.css（）方法的好處，但就我個人而言，我認為現代Javascript引擎已經進行了特殊的代碼優化，以增強從同一根對象進行的函數調用的順序。

你怎么看？

Answer 1

“對象緩存”測試非常快，因為它實際上沒有做任何事情。

它使用與其他選擇器不同的選擇器： .myDiv而不是.myClass 。 沒有.myDiv元素，因此調用正在處理空結果集。

如果您修復了該失敗的​​測試 ，則得到的結果將更像您期望的那樣：重復選擇器仍然是最慢的，其他4個選項在速度上或多或少是等效的。