0

我到处读到变量缓存和链接 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 ops/s - 慢 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 引擎已经进行了特殊的代码优化，以增强来自同一根对象的函数调用序列。

你怎么看？

4

1 回答 1

1

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

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

如果你修复了那个损坏的测试，你得到的结果更像你所期望的：重复选择器仍然是最慢的，而其他 4 个选项在速度方面或多或少都是等效的。

于 2013-02-18T03:14:09.443 回答