Javascript performance: Caching vs No Caching - weird results

Question

Я пытаюсь оптимизировать некоторый базовый сценарий jquery, который пересекает и скрывает/показывает некоторые неупорядоченные списки.

Вот TestCase в 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() является «медленным, как ад», или Infact быстро, как ад. Проблемы с производительностью могут зависеть от версии jQuery, используемой вами, или от структуры вашего DOM.

Смотрите здесь для другой стороны аргумента для find() производительности: jQuery selector performance, http://seesparkbox.com/foundry/jquery_selector_performance_testing

Benchmark тест: Find() Vs Selector

Answer 4

Cache элементы вашей фактически будет работать, в вашем случае " li 'элементов.

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

Ваша «оптимизированная» версия кеша фактически менее оптимизирована из-за дополнительного и избыточного поиска элементов li.