jQueryセレクターのパフォーマンス

StackOverflow https://stackoverflow.com/questions/1411143

質問

セレクターの表現方法に応じて、パフォーマンスに大きなばらつきがあります。たとえば、まったく同じ要素を選択する2つのセレクターを見てください：

A) someTableRow.find("td.someColumnClass").find("span.editMode").find("input")
B) someTableRow.find("td.someColumnClass span.editMode input")

私は、B）呼び出しが1つしかないため、より高速になると期待していますが、実際には、A）が約8倍高速に実行されていることがわかります。誰にも洞察がありますか？ありがとう

役に立ちましたか？

解決

少なくともjQuery 1.3を使用している（つまり、Sizzleを追加している）と仮定すると、表示されるパフォーマンスは、DOMがトラバースされる変更によるものです。 こちらから：

  

jQuery 1.2.6まで   セレクタエンジンは「トップダウン」で機能しました。   （または「左から右へ」）方法。 jQuery   1.3.x（つまり、 Sizzle （jQueryが埋め込み）は、「ボトムアップ」を導入しました; （または   「右から左へ」）クエリへのアプローチ   DOM。

2番目の例（＆quot; td.someColumnClass span.editMode input＆quot; ）では、Sizzleは効果的にこれを行います。

  1. someTableRow
    2. 内のすべての input 要素を取得します
  2. 見つかった input 要素ごとに、 class =＆quot; editMode＆quot; で span 要素の祖先ツリーを走査します。これらの祖先を持たない input 要素を削除します
  3. 見つかった span.editMode 要素ごとに、 class =＆quot; someColumnClass＆quot; で td 要素の祖先ツリーを走査します。これらの祖先を持たない input 要素を削除します

ただし、最初の例では、 find（）を呼び出すたびに各ステップを明示的に修飾し、コンテキストを定義して、そこから down をトラバースします。 「トップダウン」を強制しています。アプローチ。各ステップでコンテキストを渡すことに相当します。これはパフォーマンスブースターと一般的に考えられている：

$('input', $('span.editMode', $('td.someColumnClass', someTableRow)))

他のヒント

検索のコンテキストを減らしているため。

ケースBでは、すべてのDOM要素を検索して、条件を満たすかどうかを確認する必要があります。

ケースAでは、＆quot; td.someColumnClass＆quot;以外のすべてのものを無視することをすぐに決定できます。その後、DOMのサブセットを取得し、＆quot; span.editMode＆quot;以外のすべてのものを無視できます。そのため、「入力」を見つけるために検索する要素がはるかに少なくなっています。

Aはより多くの呼び出しですが、より単純です。 Bは1回の呼び出しですが、より複雑です。この場合、呼び出しの複雑さが呼び出しの量を大きく上回っています。

JQueryがセルクターを処理する方法は、私の経験ではCSSとは少し異なります。

検索へのコンテキストを減らすことが、Joshが指摘したように重要です。

2つのパラメーターセレクターの使用は非常に高速です

これは速度的にどのように比較されますか？

ここですべての変数が必要なわけではありませんが、私が何をしているかを明確にするためです。

var columnClasses = $('.someColumnClass');
var tableCell = $('td', columnclasses);
var editMode = $('.editmode', tableCell);
var spanInside = $('span', editMode);
var inputFinally = $('input', spanInside);

親切、

ダン

私はjQuery Selectorのパフォーマンスについて自分で調査しました。大きな問題は、Internet Explorerでのクラス名による検索です。 IEはgetElementsByClassNameをサポートしていません-したがって、jQueryおよびその他のフレームワークの「再実装」 JavaScriptですべてのDOM要素を繰り返し処理します。 jQuery Selector Performance

セレクタのパフォーマンスに関する非常に興味深い記事がここにあります： http：// blogs .atlassian.com / developer / 2009/08 / jquery_bondage.html

その中で、著者は「バインド」を表示します;関数が評価される回数を示すjQuery拡張機能。

ライセンス： CC-BY-SA と 帰属
所属していません StackOverflow
scroll top