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

Question

I am trying to optimize some basic jquery script that traverses and hides/shows some unordered lists.

Here's the testcase in jsperf: http://jsperf.com/caching-vs-no-caching

I run the test in two browsers: Chrome and IE7/IE8 and surprisingly the cached case is slower - by a little bit but still.

The unoptimized version is:

(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");

and the cached one:

(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");

Could someone explain what am I doing wrong and why does the cached version seem to be slower?

Answer 1

Short answer: Selectors are actually pretty fast, but find is slow as hell. Your cached version has introduced multiple find calls - that is what is slow.

Slightly longer answer: You only really get benefir from caching the jQuery collection if you keep re-using it as-is. Take a look at this test case where the cached version clearly runs faster: http://jsperf.com/cachingjq

Answer 2

George,

Try this in your 'cached' case and see what the performance difference is:

(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

It's debatable as to whether find() is 'slow as hell', or infact fast as hell. Your performance issues could depend on the version of jQuery your using, or the structure of your DOM.

See here for the other side of the argument for find() performance: jQuery selector performance , http://seesparkbox.com/foundry/jquery_selector_performance_testing

Benchmark test: Find() Vs Selector

Answer 4

Cache the elements your actually going to be working on, in your case the 'li' elements.

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

Your "optimized" cache version is actually less optimized because of the additional and redundant searching for the li elements.