0

我正在尝试优化一些遍历和隐藏/显示一些无序列表的基本 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");

有人可以解释我做错了什么以及为什么缓存的版本似乎更慢吗？

4

4 回答 4

5

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

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

于 2012-09-14T14:07:06.370 回答
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");
于 2012-09-14T14:11:44.230 回答
1

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

有关性能参数的另一面，请参见此处find()： jQuery 选择器性能， http ://seesparkbox.com/foundry/jquery_selector_performance_testing

基准测试：Find() 与 Selector

于 2012-09-14T14:15:21.987 回答
1

缓存您实际要处理的元素，在您的情况下是“li”元素。

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

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

于 2012-09-14T14:17:50.510 回答