Javascript性能：緩存vs無緩存 - 奇怪的結果

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

Benchmark測試：Find() Vs Selector

Answer 4

緩存你實際上將要工作的內容，你的情況「李'元素。

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

由於額外和冗餘的li元素搜索，您的「優化」緩存版本實際上沒有進行優化。