0

順序付けされていないリストをトラバースして非表示/表示する基本的なjqueryスクリプトを最適化しようとしています。

jsperfのテストケースは次のとおりです。http：//jsperf.com/caching-vs-no-caching

ChromeとIE7/IE8の2つのブラウザーでテストを実行しましたが、驚くべきことに、キャッシュされたケースは少し遅くなりましたが、それでもまだです。

最適化されていないバージョンは次のとおりです。

(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コレクションをそのまま再利用し続ける場合にのみ、jQueryコレクションをキャッシュすることで実際にメリットが得られます。キャッシュされたバージョンが明らかに高速に実行されるこのテストケースを見てください：http：//jsperf.com/cachingjq

于 2012-09-14T14:07:06.370 に答える
2

ジョージ、

'cached'の場合にこれを試して、パフォーマンスの違いを確認してください。

(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 に答える