jQueryセレクターのパフォーマンス
-
05-07-2019 - |
質問
セレクターの表現方法に応じて、パフォーマンスに大きなばらつきがあります。たとえば、まったく同じ要素を選択する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番目の例(" td.someColumnClass span.editMode input"
)では、Sizzleは効果的にこれを行います。
-
someTableRow
内のすべての - 見つかった
input
要素ごとに、class =" editMode"
でspan
要素の祖先ツリーを走査します。これらの祖先を持たないinput
要素を削除します - 見つかった
span.editMode
要素ごとに、class =" someColumnClass"
でtd
要素の祖先ツリーを走査します。これらの祖先を持たないinput
要素を削除します
input
要素を取得します
ただし、最初の例では、 find()
を呼び出すたびに各ステップを明示的に修飾し、コンテキストを定義して、そこから down をトラバースします。 「トップダウン」を強制しています。アプローチ。各ステップでコンテキストを渡すことに相当します。これはパフォーマンスブースターと一般的に考えられている:
$('input', $('span.editMode', $('td.someColumnClass', someTableRow)))
他のヒント
検索のコンテキストを減らしているため。
ケースBでは、すべてのDOM要素を検索して、条件を満たすかどうかを確認する必要があります。
ケースAでは、" td.someColumnClass"以外のすべてのものを無視することをすぐに決定できます。その後、DOMのサブセットを取得し、" span.editMode"以外のすべてのものを無視できます。そのため、「入力」を見つけるために検索する要素がはるかに少なくなっています。
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拡張機能。