[英]Odd performance of jQuery variable caching and chaining
I've read everywhere that variable caching and chaining jQuery function calls was good for performance. 我到处都读到了变量缓存和链接jQuery函数调用对性能有好处。
However, I've come across this jsperf test that seems to demonstrate some interesting quirks. 但是,我遇到了这个jsperf测试 ,似乎证明了一些有趣的怪癖。
Please see the below test cases: 请查看以下测试案例:
Case 1: No Caching 情况1:不缓存
$(".myClass").css("color", "red");
$(".myClass").css("opacity", 1);
$(".myClass").css("display", "block");
Case 2: Chaining 情况2:链接
$(".myClass").css("color", "red").css("opacity", 1).css("display", "block");
Case 3: Object Caching 情况3:对象缓存
var $myDiv = $(".myDiv");
$myDiv.css("color", "red");
$myDiv.css("opacity", 1);
$myDiv.css("display", "block");
Case 4: Object Caching + Chaining 情况4:对象缓存+链接
var $myDiv = $(".myClass");
$myDiv.css("color", "red").css("opacity", 1).css("display", "block");
Case 5: normal jQuery 案例5:普通jQuery
$(".myClass").css({
color: "red",
opacity: 1,
display: "block"
});
Here's the performance test results on my computer (Win7 FF18) ordered by test cases: 这是按测试案例排序的我的计算机(Win7 FF18)上的性能测试结果:
(These results are conform with measurements made with other browsers.) (这些结果与其他浏览器的测量结果一致。)
As you can see, the test case 1 is the slowest which was expected. 如您所见,测试用例1是预期中最慢的。 Oddly, the test case 3 is the fastest, while the test case 2, 4 and 5 are quite slow too.
奇怪的是,测试用例3最快,而测试用例2、4和5也很慢。
The biggest surprise is that the test case 3 is much faster than test case 4. In other words, chaining jQuery calls greatly reduced performance. 最大的惊喜是测试用例3比测试用例4快得多。换句话说,链接jQuery调用大大降低了性能。
Have you noticed this on your own browser? 您在自己的浏览器中注意到了吗?
Maybe it's a perk of the .css() method, but personally, I think that modern Javascript engines have already made special code optimisations to enhance sequences of function calls from the same root object. 也许这是.css()方法的好处,但就我个人而言,我认为现代Javascript引擎已经进行了特殊的代码优化,以增强从同一根对象进行的函数调用的顺序。
What do you think? 你怎么看?
The "Object Caching" test is so much faster because it's not actually doing anything. “对象缓存”测试非常快,因为它实际上没有做任何事情。
It uses a different selector than the others: .myDiv
instead of .myClass
. 它使用与其他选择器不同的选择器:
.myDiv
而不是.myClass
。 There are no .myDiv
elements, so the calls are acting on an empty result set. 没有
.myDiv
元素,因此调用正在处理空结果集。
If you fix that broken test , you get results more like what you'd expect: repeating the selector is still slowest, and the other 4 options are all more or less equivalent, speed-wise. 如果您修复了该失败的测试 ,则得到的结果将更像您期望的那样:重复选择器仍然是最慢的,其他4个选项在速度上或多或少是等效的。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.