Javascript 性能：缓存与无缓存 - 奇怪的结果

Question

我正在尝试优化一些遍历和隐藏/显示一些无序列表的基本 jquery 脚本。

这是 jsperf 中的测试用例：http://jsperf.com/caching-vs-no-caching

我在两个浏览器中运行测试：Chrome 和 IE7/IE8，令人惊讶的是，缓存的情况变慢了 - 稍微慢了一点，但仍然如此。

未优化的版本是：

(function( $ ) {
  $.fn.menuManipulation = function() {
    this.parents().show();
  };
})( jQuery );

$('.menu-vertical li.selected').menuManipulation();
$(".menu-vertical li.selected > ul.static").show();
$('li.static').has('ul').addClass("with-child");

还有缓存的：

(function($) {  
    $.fn.menuManipulation = function() {
    this.parents().show();
    };
})(jQuery);

var menu = $('.menu-vertical');
menu.find('li.selected').menuManipulation();
menu.find('li.selected > ul.static').show();
menu.find('li.static').has('ul').addClass("with-child");

谁能解释我做错了什么以及为什么缓存的版本似乎更慢？

Answer 1

简短回答：选择器实际上非常快，但 find 慢得要命。您的缓存版本引入了多个 find 调用 - 这很慢。

稍微长一点的答案：如果你继续按原样重复使用它，你只会从缓存 jQuery 集合中真正受益。看看这个缓存版本明显跑得更快的测试用例：http://jsperf.com/cachingjq

Answer 2

乔治，

在您的“缓存”情况下试试这个，看看性能差异是什么：

(function($) {  
    $.fn.menuManipulation = function() {
        this.parents().show();
    };
})(jQuery);

var menu = $('.menu-vertical');
$('li.selected', menu).menuManipulation();
$('li.selected > ul.static', menu).show();
$('li.static', menu).has('ul').addClass("with-child");

Answer 3

find() 是“慢得要命”还是实际上快得要命，这是有争议的。您的性能问题可能取决于您使用的 jQuery 版本或 DOM 的结构。

请参阅此处以了解find() 性能的另一面： jQuery selector performance, http://seesparkbox.com/foundry/jquery_selector_performance_testing

基准测试：Find() Vs Selector

Answer 4

缓存你实际要处理的元素，在你的例子中是“li”元素。

var menu = $('.menu-vertical li');
menu.filter('.selected').children('ul.static').show().end().menuManipulation();
menu.filter('.static').has('ul').addClass("with-child");

由于对 li 元素的额外和冗余搜索，您的“优化”缓存版本实际上优化程度较低。