0

私はサイトで使用されている JavaScript コードを最適化する過程にあり、何をすべきか、何をすべきでないかについての指針/ヒントが必要です。ライブラリとして jQuery 1.7.1 を使用します。

最適化/最適化されたコードの作成に関しては、私はまだ初心者ですが、DOM トラバーサルの数を減らす必要があることはわかっています。

したがって、私が考えているのは、より頻繁に使用される要素をキャッシュし、キャッシュされた要素を何らかの理由で使用することです。

私が混乱していること、または知りたいと思っていることは、DOM の準備ができている場合、「body」要素をグローバル スコープの変数にキャッシュし、それをすべての JavaScript コード/ファイルで使用して、可能性のある要素を見つけることです。その後必要があります。

お気に入り

jQuery(function(){
    myGlobalObj.body = jQuery('body');

    ..
    ..
    ..
    myGlobalObj.body.find('.someElement').<whatever>;
    ..
    ..
    ..
    myGlobalObj.body.find('#someOtherElement').<whatever>;
    ..
    ..
    ..

});

パフォーマンスの向上に役立つことが証明されますか? DOM ツリーが更新されないなどの悪影響はありますか?

ご意見をお聞かせください。

編集＃1：コメントと回答に感謝しますが、私は自分自身を明確にしていないと思います.

className を持つセレクターよりも ID ベースのセレクターを使用する利点はわかっていますが、私の懸念は、検索/分離に「本体」のキャッシュされた参照 (または検索された要素の最も近いフィルター処理された親) を使用することでパフォーマンスが向上することでした。ターゲット要素。

つまり、毎回 $(..whateverElement..) を使用する代わりに、

$cachedParent.find(..whateverElement..) のパフォーマンスが向上するかどうか?

4

3 に答える 3

2

$("#id")よりもはるかに効率的です$(".class")-- は$(".class")セット全体を反復処理します。

これを精査する良い方法は次のとおりです。

var yourElement = $(".class");
for (var i=0; i< yourElement.length; i++)
 { alert(i);}

$("#id")その 1 つの要素のみを返し、実行します (同じ値を持つ ID が不適切に複数ある場合の最初の要素)。

.children()編集:および.parent()関数を使用すると、さらに少し複雑になります。これらは、jquery セレクター ネイティブで使用可能な引数に関して Jorge が以下で述べたことに関連しています (ほとんど同じように実行されます)。

@ホルヘ - 良い観察

于 2012-05-23T15:22:53.267 に答える
1

ネイティブメソッド$('.someElement')とネイティブメソッドを使用するため$('#someOtherElement')、使用するよりもはるかに優れています。.findgetElementsByClassName(..)getElementById(..)

証拠

于 2012-05-23T15:22:27.867 に答える
1

$('#id')これを行うための最速の方法です

また、後で再利用するために参照を保存できます

var $cache = $('.cache');

于 2012-05-23T15:21:56.620 に答える