7

同じ関数で同じ DOM 要素に複数回アクセスする必要がある場合があるため、Javascript (JS) コードに起因する問題があります。いくつかの推論もここで提供されます。

パフォーマンスの観点から、jQuery オブジェクトを一度作成してからキャッシュする方が良いですか、それとも同じ jQuery オブジェクトを任意に作成する方が良いですか? 例：

function(){
  $('selector XXX').doSomething(); //first call
  $('selector XXX').doSomething(); //second call
  ...
  $('selector XXX').doSomething(); // n-th call
}

また

function(){
  var  obj = $('selector XXX');
  obj.doSomething(); //first call
  obj.doSomething(); //second call
  ...
  obj.doSomething(); // n-th call       
}

答えはおそらく「n」の値に依存すると思います。そのため、n は「小さな」数 (たとえば 3)、次に中程度の数 (たとえば 10)、最後に大きな数 (たとえば 30、オブジェクトは for サイクルでの比較に使用されます)。

前もって感謝します。

4

6 に答える 6

8

n が 1 より大きい場合は、要素をキャッシュするか、要素をキャッシュするか、操作を連鎖させることを常にお勧めします (ほとんどのjQuery 操作では通常、ラップされたセット自体を返すため、これを行うことができます) $('#something').something().somethingelse();。余談ですが、コードの後半で jQuery セットに対して操作を実行していることが明確になるように、キャッシュ変数の名前をマネー記号で始めるのが少し標準になっています。そのため、後で多くの人がそうするのを見るでしょう。$var $content = $('#content');$content.find('...');

于 2012-08-07T15:57:29.810 に答える
4

2番目は優れています。最も重要なことは、それがよりきれいになることです。将来、セレクターを変更したい場合は、1 か所だけ変更する必要があります。それ以外の場合は、N 個の場所で変更する必要があります。

第二に、ユーザーは特に重い dom の場合、またはその関数を頻繁に呼び出している場合にのみ気付くでしょうが、パフォーマンスが向上するはずです。

于 2012-08-07T15:57:04.417 に答える
2

この質問を別の視点から見ると、正解は明らかです。

最初のケースでは、表示されるすべての場所で選択ロジックを複製しています。要素の名前を変更する場合は、発生するたびに変更する必要があります。これは、それを行わない十分な理由になるはずです。要素のセレクターをキャッシュするか、要素自体をキャッシュするかの 2 つのオプションがあります。要素をオブジェクトとして使用する方が、名前を使用するよりも理にかなっています。

性能的には、影響は無視できると思います。おそらく、この特定のユースケースのテスト結果を見つけることができるでしょう: jQuery オブジェクトをキャッシュする vs 常にそれらを再選択する. DOM が大きく、多くのルックアップを行う場合、パフォーマンスが問題になる可能性がありますが、その場合は自分で確認する必要があります。

オブジェクトが使用しているメモリの量を正確に知りたい場合は、Chrome Heap Profilerを使用して確認できます。同様のツールが他のブラウザで利用できるかどうかはわかりません。おそらく、特に IE の場合、実装によってパフォーマンスが大幅に異なるでしょうが、好奇心を満足させるかもしれません。

IMO、2番目のバリアントを使用して、選択の結果をオブジェクトに保存する必要があります。パフォーマンスを向上させるためではなく、重複するロジックをできるだけ少なくする必要があります。

キャッシングに関しては、 Nick Craver の回答$(this)に同意します。彼がそこで言ったように、可能な場合はチェーンも使用する必要があります-コードをクリーンアップして問題を解決します.

于 2012-08-07T15:59:29.677 に答える
1

http://www.artzstudio.com/2009/04/jquery-performance-rules/を ご覧ください。

また

http://addyosmani.com/jqprovenperformance/

于 2012-08-07T15:58:43.820 に答える