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