1

かなり基本的な質問。

jQuery または生の JavaScript がプリコンパイル、または変数式を関数やセレクターにキャッシュするのに十分賢いかどうかを知りたいのですが、そうでない場合、これをやめる理由はありますか?

例えば

$('#whatever').on('click', function(){
    $('#template').click();
});

var n = 0;

for(var i = 0; i < 20; i++){
    n = 1 + 1;
    $('#whatever').click();
}

console.log(n);

要素を求めて dom を 20 回検索し$('#template')ますか? または、ライブラリ/エンジンはポインタを格納するのに十分スマートですか?

そして、コンピュータに 1+1 を 2 回実行するか、それともその式をキャッシュまたはプリコンパイルするか?

明らかに、これらは本当にばかげた例ですが、要点を理解しています。

はい、誰もn = 1 + 1コードに (願わくば) 行を入れることはありません。

そして、`var template = $('#template'); を持つようにコードを変更できます。それ自体を処理しない場合は、クリック ハンドラーの前に、しかし、私たちは/なぜそれをしなければならないのだろうか?

4

1 に答える 1

1

まず、jQueryはJavaScript です。jQuery は、JavaScript に機能を言語として追加することはできません。

そうは言っても、JavaScript は ECMAScript であり、ブラウザごとに異なる方法で実装されています。JavaScript の実装が持つキャッシュのレベルについて何かをお伝えすることは (不可能ではないにしても) 非常に困難です。言語として規定された動作がないからです。

パフォーマンス上の理由から DOM 要素への参照をキャッシュすることは理にかなっていると思いますが、それぞれの個別の実装が舞台裏で何をしているのかについて話すことはできません。

jQuery に関する限り、私が知る限り、現在のバージョンでは魔法のようなセレクター キャッシュは発生していません。が呼び出されるたび$(...)に、セレクターを再評価する必要があります。セレクターは、単純な css スタイルのセレクター ex$('#foo .bar baz')にすることも、要素フラグメント ex にすることもできます$('<div>foo bar baz</div>')。

jQuery 関数にセレクターが渡された場合、セレクターに一致する可能性のある新しい要素が追加されたか、既存の要素が変更されてセレクターに一致しなくなった可能性があるため、DOM を再チェックする必要があります。

jQuery オブジェクトのキャッシュに関する限り、jQuery オブジェクトへの参照を保存するのが一般的であり、場合によっては、よりパフォーマンスが高くなります。どちらの方法が優れているかを確実に知る唯一の方法は、パフォーマンス アナライザーを使用してスクリプトを実行し、ボトルネックがどこにあるかを確認することです。コードを 1 つの特定の方法で記述すると、コードのパフォーマンスが向上すると考える理由はありません。

同じ選択に対して一連の操作を実行しようとしているだけの場合は、jQuery のメソッド チェーンを利用してください。

$('.selector').addClass('foo').removeClass('bar').click(function () {...});

jQuery メソッドは通常、元の選択を戻り値として返すため、コードを非常に簡潔に簡素化できます。

于 2012-11-18T07:35:49.460 に答える