7

要素を選択するためにjQueryを使用する場合ID、それは非常に効率的です。このセレクターについて質問があります。

この 3 つのセレクターを検討してください。

$('#MyElement')

$('#Mytbl #MyElement')

$('#Mytbl .MyClass')

どちらが速いですか?なぜですか?jQueryで要素を選択するのにかかった時間を確認するにはどうすればよいですか?

4

9 に答える 9

10

ダイレクト ID セレクターは常に最速です。

あなたの質問に基づいて簡単なテストケースを作成しました...

http://jsperf.com/selector-test-id-id-id-id-class

ネストされた ID を選択するのは間違っています。ID が一意である必要がある場合は、ネストされているかどうかは関係ありません。

于 2012-11-22T08:29:38.940 に答える
5

これは、いくつかのJavaScript呼び出し間の時間を停止する方法です

selectorTimes = [];
var start = new Date().getTime();
$('#MyElement')
selectorTimes.push(new Date().getTime()-start);

start = new Date().getTime()
$('#Mytbl #MyElement')
selectorTimes.push(new Date().getTime()-start);

start = new Date().getTime()
$('#Mytbl .MyClass')
selectorTimes.push(new Date().getTime()-start);

console.log(selectorTimes);

これを直接選択する domid がある場合、2 番目のセレクターは効率的ではないと思います: $('#MyElement')

于 2012-11-22T08:28:38.933 に答える
5

最初のものは、検索するプロパティが 1 つしかないため、最も高速です。でも、

document.getElementById("MyElement")

ただし、さらに高速です。これはネイティブの JavaScript であり、jQuery とは異なり、最初に探しているものを把握するために大量の jQuery コードを実行する必要がなく、ブラウザーはユーザーが何をしたいのかをすぐに認識します。

jsPerfを使用して速度テストを実行し、関数を比較できます: Test Case。結果：

$('#MyElement')
Ops/sec: 967,509
92% slower

$('#Mytbl #MyElement')
Ops/sec: 83,837
99% slower

$('#Mytbl .MyClass')
Ops/sec: 49,413
100% slower

document.getElementById("MyElement")
Ops/sec: 10,857,632
fastest

予想通り、ネイティブの getter が最も高速で、次に jQuery の getter が続き、セレクターが 1 つしかなく、ネイティブの速度の 10% 未満です。2 つのパラメーターを持つ jQuery ゲッターは、ID と比較してクラスは通常複数の要素に適用されるため、ネイティブ コード、特にクラス セレクターの 1 秒あたりの操作に近づくことさえできません。(ネイティブ ID セレクターは、1 つの要素を見つけると検索を停止します。jQuery もそうするかどうかはわかりません。)

于 2012-11-22T08:27:32.043 に答える
2

また、ネストされたセレクターが必要な場合は、 $().find().find() を使用する方が高速です

http://jsperf.com/selector-test-id-id-id-id-class/2

$('#Mytbl .MyClass')
$('#Mytbl').find('.MyClass')

後者は約 65% 高速です。

于 2012-11-22T09:45:11.250 に答える
2

はい、どうぞ。各例の上にあるコメントを参照してください。

//fastest because it is just one id lookup: document.getElementById("MyElement") with no further processing.
$('#MyElement')
//a little slower. JQuery interprets selectors from right to left so it first looks up for #MyElement and then checks if it is hosted in #Mytbl
$('#Mytbl #MyElement')
//the slowest of all. JQuery interprets selectors from right to left so it first finds all elements with .MyClass as their class and then searches for those hosted in #Mytbl.
$('#Mytbl .MyClass')

可能であれば、常に id のみを使用してください (最初の例のように) が、複数のセレクターとクラスを連鎖させる必要がある場合は、最も厳密なものを右側に配置してください。たとえば、ID。JQuery はセレクターを右から左に解釈するためです。

于 2012-11-22T08:28:19.540 に答える
2

いくつかのこと：

  • セレクターが多い = 検索が遅くなります。より少ない述語で目的の結果が得られる場合は、そうしてください。
  • ID による要素の取得は、クラスによる取得よりも高速です。getElementById は、頻繁に使用されるため、大幅に最適化された JavaScript のコア関数です。可能であればこれを活用してください。
  • スペース セレクター (' ') は、子セレクター ('>') よりもはるかにコストがかかります。子セレクターを使用できる場合は、使用してください。

これらの規則は、JavaScript や jQuery と同様に CSS にも適用されます。

于 2012-11-22T08:30:37.687 に答える
1

明らかに最初のもの$("#MyElement")は、他の 2 よりも高速です
。id を持つ要素へのアクセスは常に高速ですが、コンテナ内の要素を見つける必要がある場合がありました。その場合、.find()または.filter()（状況に応じて）を優先します。
セレクターの違いは、ブラウザーごとに異なります。たとえば、IE のクラスを介してアクセスすると、FF よりも遅くなります。ID ではなくクラスで要素にアクセスする場合、FF の方が高速です。

あなたの2番目の例、つまり、ここでは、どの方法が合法であるが適切ではない$("#mytbl #MyElement")かを見つけ#MyElementています。#mytbl要素の ID は既にわかっているため (ページにこの ID を持つ要素が 1 つしかないと仮定して)、 を使用することをお勧めします$("#MyElement")。$("#mytbl #MyElement")最初に #mytbl を読み取り、トラバースしてその下の #MyElement を見つけるため、時間がかかり遅くなります。

さまざまなケースをテストするために、小さなスニペットを記述してループ内の少なくとも 10000 要素を読み取り/アクセスすることができます。

于 2012-11-22T08:31:59.963 に答える
0

単純に 1 つの ID を検索しているため、最初の ID が最も速いと言えます。

と

$('#Mytbl .MyClass')

クラス「MyClass」を持つ要素のタイプを指定していないため、最も遅いです

于 2012-11-22T08:28:31.440 に答える
0

最速は次のとおりです。

  $('#Mytbl', '#MytblContainer' );

この場合、jquery は「#Mytbl」を見つけるために dom ツリー全体を検索する必要がないからです。指定されたスコープのみで検索します。IE では、「#MytblContainer」のみで検索されます。

于 2012-11-22T08:27:52.430 に答える