jQuery セレクターのパフォーマンスを向上させる良い方法はありますか?

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

質問

jQuery呼び出しのセレクターのパフォーマンスを改善できる方法を探しています。具体的には次のようなものです。

は $("div.myclass") よりも速い $(".myclass")

おそらくそうかもしれないと思いますが、jQuery が最初にタグ名による検索を制限するほど賢いのかどうかはわかりません。最高のパフォーマンスを実現する jQuery セレクター文字列を作成する方法について何かアイデアを持っている人はいますか?

役に立ちましたか？

解決

というのは疑いようのないことだ 最初にタグ名でフィルタリングする方がはるかに高速です クラス名でフィルタリングするよりも。

getElementsByTagName の場合と同様に、すべてのブラウザが getElementsByClassName をネイティブに実装するまでは、これが当てはまります。

他のヒント

場合によっては、クエリのコンテキストを制限することでクエリを高速化できます。要素参照がある場合は、それを 2 番目の引数として渡して、クエリの範囲を制限できます。

$(".myclass", a_DOM_element);

よりも速いはずです

$(".myclass");

すでに_DOM_elementがあり、それがドキュメント全体よりも大幅に小さい場合。

Reid が上で述べたように、jQuery はボトムアップで動作します。それでも

つまり $('#foo bar div') よりずっと遅いです $('bar div #foo')

それは問題ではありません。持っていたら #foo ID は一意である必要があるため、セレクター内でその前に何も置かないでください。

ポイントは：

  • ID を持つ要素から何かを副選択している場合は、最初に後者を選択してから使用します .find, .children 等。： $('#foo').find('div')
  • セレクターの左端 (最初) の部分 できる 右端 (最後の) 部分にスケーリングすると効率が悪くなります。 すべき 最も効率的であること - つまり、ID を持っていない場合は、必ず ID を探していることを確認してください $('div.common[slow*=Search] input.rare') それよりも $('div.rare input.common[name*=slowSearch]') - これは常に適用できるわけではないため、それに応じて分割してセレクターの順序を強制するようにしてください。

何が高速であるかを完全に理解するには、CSS パーサーがどのように機能するかを理解する必要があります。

渡したセレクターは、R​​egExp を使用して認識可能な部分に分割され、部分ごとに処理されます。

ID や TagName などの一部のセレクターは、より高速なブラウザーのネイティブ実装を使用します。一方、クラスや属性などの他のものは個別にプログラムされるため非常に遅くなり、選択した要素をループしてすべてのクラス名をチェックする必要があります。

はい、あなたの質問に答えます:

$('tag.class') は単なる $('.class') よりも高速です。なぜ？最初のケースでは、jQuery はネイティブ ブラウザ実装を使用して、必要な要素だけを選択するようフィルタリングします。その後初めて、要求された内容に絞り込まれた、より遅い .class 実装が起動されます。

2 番目のケースでは、jQuery はそのメソッドを使用して、クラスを取得することで各要素をフィルターします。

すべての JavaScript ライブラリがこれに基づいているため、これは jQuery よりもさらに広がります。他の唯一のオプションは xPath を使用することですが、現時点ではすべてのブラウザーで十分にサポートされているわけではありません。

jQuery セレクターのパフォーマンスを向上させる方法は次のとおりです。

99% の Web アプリ (Ajax 負荷の高いアプリであっても) では、JavaScript ではなく Web サーバーの接続速度と応答がアプリのパフォーマンスを左右することを注記します。私は、意図的に遅いコードを書くべきだとか、他のコードよりも速くなりそうなコードを意識することが一般的に良くないと言っているのではありません。

しかし、実際にはまだ存在していない問題を解決しようとしているのか、それとも何か問題が発生する可能性を考慮して最適化しているのかが気になります。 変化 近い将来（たとえば、より多くの人がサポートするブラウザを使い始めたら） getElementsByClassName() 前に参照した関数)、最適化されたコードの実際の実行速度が遅くなります。

パフォーマンス情報を探すもう 1 つの場所は、Hugo Vidal Teixeira のセレクターのパフォーマンス分析ページです。

http://www.componenthouse.com/article-19

これにより、ID 別のセレクター、クラス別のセレクター、タグ名にプレフィックスを付けたセレクターの速度の概要が得られます。

ID による最速のセレクターは次のとおりです。$("#id")

クラス別の最速セレクターは次のとおりです。$('タグ.クラス')

したがって、タグによる接頭辞はクラスによる選択の場合にのみ役立ちます。

私はいくつかの jQuery メーリング リストに参加したことがありますが、そこで読んだ限りでは、タグ名、次にクラス名でフィルタリングしている可能性が高くなります (その方が高速な場合はその逆も可能です)。彼らはスピードに執着しており、少しでもパフォーマンスを向上させるためなら何でも利用します。

セレクターを毎秒何千回も実行しない限り、あまり心配する必要はありません。

本当に心配な場合は、ベンチマークを実行して、どちらが速いかを確認してください。

Oliver Steele の Sequentially ライブラリを使用して、メソッドを一度に呼び出すのではなく、時間をかけて呼び出すことを検討してください。

http://osteele.com/sources/javascript/sequentially/

「最終的に」メソッドは、最初の呼び出しから一定の時間が経過した後にメソッドを呼び出すのに役立ちます。「順次」方法では、一定期間にわたって複数のタスクをキューに入れることができます。

非常に役立ちます！

あ 素晴らしいヒント 私が尋ねた質問から：使用 標準CSSセレクター 可能な限り。これにより、jQuery が セレクター API. 。によると John Resig によって実行されたテスト, 、これにより、セレクターのパフォーマンスがネイティブに近くなります。などの機能 :has() そして :contains() 避けるべきです。

私の調査によると、Selectors API のサポートは、jQuery 1.2.7、Firefox 3.1、IE 8、Opera 10、Safari 3.1 で導入されました。

私の記憶が間違っていなければ、jQuery もボトムアップ エンジンです。つまり、 $('#foo bar div') よりもはるかに遅いです $('bar div #foo'). 。例えば、 $('#foo a') すべてを通過します a ページ上の要素を調べて、それらの要素に祖先があるかどうかを確認します。 #foo, そのため、このセレクターは非常に非効率的になります。

Resig はすでにこのシナリオに合わせて最適化している可能性があります (もし彼が最適化していても私は驚かないでしょう - 私は彼が Sizzle エンジンで最適化したと信じていますが、100% 確信しているわけではありません)。

最初に ID で選択するほうが常に速いと思います。

$("#myform th").css("color","red");

よりも速いはずです

$("th").css("color","red");

ただし、ID から始める場合、連鎖はどの程度役立つでしょうか?これですか

$("#myform").find("th").css("color","red")
.end().find("td").css("color","blue");

これより速いことはありますか？

$("#myform th").css("color","red");
$("#myform td").css("color","blue");
ライセンス： CC-BY-SA と 帰属
所属していません StackOverflow
scroll top