1

セレクターのパフォーマンスについて 3 つのクエリがあります。

まず、次のステートメントにパフォーマンスの違いはありますか。

$('#content .someclass')と$('.someclass', '#content')

私は常に最初の方法を使用してきましたが、最近では多くの人が 2 番目のオプションに移行しているようです。両者の間に何かメリットはありますか

第二に、追加した場合、それdiv.someclassは単なるものよりも優れています.someclass（someclassのすべての要素がとにかくdivになる場合）。この場合の最初のものは、最初にすべての div を取得し、その後に div を取得する必要があるため、遅くなると思っていました.someclassが、セレクターがどのように機能するかがわからないため、推測しているだけです

最後に、 を使用する場合$(this)、このオブジェクトをキャッシュしたほうがよいでしょうvar $thisobject = $(this)か? それとも違いはありませんか? 私はいつも$(this)それ自体がjQueryオブジェクトだと思っていましたが、実際にthisはjQueryオブジェクトに変換されているので、おそらく変数に貼り付ける方が複数呼び出すよりも優れていると思います$(this)

4

3 に答える 3

1

それは、セレクターの正確な性質に依存します。

一般に、ブラウザーは DOM にネイティブで直接アクセスできるため、面倒な作業はすべてブラウザーに任せたほうがよいでしょう。

AIUI . .someclass_ _ _#content

ただし、この特定のケースでは、「親」は ID によって識別されるため、その特定の要素から開始してその子孫のみを考慮するようにブラウザに指示する方が速い場合があります。

つまり「場合による」。実際のページまたは jsperf.com で試してみて、何が起こるか見てみましょう。

于 2013-06-04T15:54:53.070 に答える
1

リストした2つに加えて、3番目の選択肢があります。

1: $('#content .someclass')

2: $('.someclass', '#content')

3: $('#content').find('.someclass')

テストを実行しなくても言えることの 1 つは、#3 が #2 よりも高速であるということです。これは、内部で #2 が #3 になるためです。これを行うjQuery ソース コードを次に示します。これinit()は、実際には jQuery コンストラクターである関数にあります。かなり長い一連のテストの後、呼び出しがあったことを検出し、代わりに呼び出しを$(selector,context)行います。$(context).find(selector)

// HANDLE: $(expr, context)
// (which is just equivalent to: $(context).find(expr)
} else {
    return this.constructor( context ).find( selector );
}

$(context).find(selector)自分で呼び出して、余分なチェックを避けることができます。

したがって、#2 は決して最速のコードではありません。＃3は常にそれを打ち負かします。

また、@KevinB が指摘しているように、#2 は/関数の文書化された使用法ではありません。これは、関数の文書化された使用法である #3 への単純な変換であり、コードは何年もの間このように機能しているため、ドキュメントの単なる見落としである可能性があります。$jQuery

いずれにせよ、文書化されたケースであっても、#2 を使用する理由はほとんどありません。#3 の方が高速で理解しやすいためです。

#3 は #1 と比べてどうですか? ほとんどの場合はおそらく高速ですが、ブラウザーや特定のセレクターやページの複雑さによって異なる場合があります。ここでjsPerfはあなたの味方ですが、単に不自然なテストではなく、重要なページと同様のページを提供するようにしてください。

div.someclass対についても同じこと.someclass。テストして見てください。

に関して$(this)は、その$関数名は、通常の JavaScript 関数呼び出しである場合に、魔法のように見えることがあります。理解しやすいように、jQuery代わりに関数名を使用してみてください。

jQuery(this)

ここで、これが実際に関数呼び出しであり、ある種の魔法の構文ではないことがより明確になるはずです。$(this)orを使用する場合も同じです$(anything)。常に関数呼び出しです。はい、繰り返し使用している場合は、結果を変数に保存することをお勧めします。

var $this = $(this);

私の唯一の提案は、変数に名前を付けないことです$thisobject。余分なobject言い回しは、実際には名前をより明確にするものではありません。simple$thisは、他の開発者にとってよりなじみ深いものになります。または、よりわかりやすい名前を使用することをお勧めします。

var $element = $(this);

一般に、thisと$thisは jQuery コードで過度に使用されているため、可能な限り短いがわかりやすい名前の通常の変数を使用することをお勧めします。

次の不自然な jQuery プラグインについて考えてみましょう。

jQuery.fn.log = function() {
    this.each( function() {
        console.log( this );
    });
    return this;
};

この短い関数では、this意味が 2 回変わります。最初は jQuery オブジェクト、次にそのオブジェクトの個々の要素、そして再び jQuery オブジェクトです。人々が問題を抱えているのも不思議ではありませんthis!

代わりに、名前付きパラメーターを使用して次のことを行うことができます.each()。

$.fn.log = function() {
    this.each( function( i, element ) {
        console.log( element );
    });
    return this;
};

それははるかに混乱が少なくelement、内部関数で jQuery オブジェクトが必要な場合は、次の場合と同じ方法で実行できますthis。

var $element = $(element);
于 2013-06-04T17:05:16.290 に答える