javascript - jQueryセレクターのパフォーマンスを向上させる良い方法は?

Question

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

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

私はそうかもしれないと思いますが、jQueryが最初にタグ名で検索を制限するほどスマートかどうかはわかりません.

score 36 · Accepted Answer

最初にタグ名でフィルタリングする方が、クラス名でフィルタリングするよりもはるかに高速であることは間違いありません。

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

score 14 · Accepted Answer

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

$(".myclass", a_DOM_element);

よりも速いはずです

$(".myclass");

すでに a_DOM_element があり、ドキュメント全体よりもかなり小さい場合。

score 5 · Accepted Answer

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

渡したセレクターは、RegExpを使用して認識可能な部分に分割され、1つずつ処理されます。

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

だからあなたの質問に答えるためにはい：

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

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

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

score 5 · Accepted Answer

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

つまり$('#foo bar div')、よりもはるかに遅いということです$('bar div #foo')

それは重要ではありません。#fooIDは一意である必要があるため、セレクターの前に何も配置しない場合。

ポイントは：

IDを持つ要素から何かをサブ選択する場合は、最初に後者を選択してから.find、.childrenなどを使用します。$('#foo').find('div')
セレクターの左端（最初）の部分は、最も効率的であるはずの右端（最後）の部分へのスケーリングの効率が低くなる可能性があります。つまり、IDがない場合は、ではなく探していることを確認してください。常に適用可能である場合は、それに応じて分割してセレクター順序を強制するようにしてください。$('div.common[slow*=Search] input.rare')$('div.rare input.common[name*=slowSearch]')

score 4 · Accepted Answer

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

可能な限り #id で選択します (パフォーマンステストの結果、最大250 倍速くなります)
選択範囲を指定してください ( $('.select', this))

score 3 · Accepted Answer

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

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

これにより、ID によるセレクター、クラスによるセレクター、およびタグ名の接頭辞を付けたセレクターの速度の概要が分かります。

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

クラス別最速のセレクターは $('tag.class') でした

したがって、タグによるプレフィックスは、クラスで選択する場合にのみ役立ちました!

score 3 · Accepted Answer

99% の Web アプリでは、たとえ ajax を多用するアプリであっても、JavaScript よりも Web サーバーの接続速度と応答がアプリのパフォーマンスを左右することを付け加えておきます。意図的に遅いコードを書くべきだと言っているわけではありませんし、他のものよりも速くなる可能性が高いものを一般的に認識しておくことが良くないと言っているのでもありません。

しかし、まだ実際には存在しない問題を解決しようとしているのだろうか、それとも近い将来変更getElementsByClassName()される可能性のある何かのために最適化しているのだろうか (たとえば、より多くの人が機能をサポートするブラウザーを使い始める場合)これにより、最適化されたコードの実行が実際には遅くなります。

score 0 · Accepted Answer

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

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

score 0 · Accepted Answer

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

http://osteele.com/sources/javascript/順次/

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

非常に役立ちます！

score 0 · Accepted Answer

私はいくつかのjQueryメーリングリストに参加しており、そこで読んだことから、タグ名、次にクラス名でフィルタリングする可能性が最も高いです（または、高速であればその逆）。彼らはスピードに執着しており、わずかなパフォーマンスを得るために何でも使用します。

そのセレクターを毎秒何千回も実行していない限り、とにかくあまり心配しません。

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

score 0 · Accepted Answer

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

Resig は、このシナリオに合わせて既に最適化されている可能性があります (彼がそうしたとしても、私は驚くことではありません。彼の Sizzle エンジンではそうだったと思いますが、100% 確実ではありません)。

score 0 · Accepted Answer

最初に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");

javascript - jQueryセレクターのパフォーマンスを向上させる良い方法は?

12 に答える 12

Related

Reference