100

最近、PHPStorm IDEのバージョンをアップグレードしましたが、jQueryの非効率的な使用について警告が表示されるようになりました。

例えば：

var property_single_location = $("#property [data-role='content'] .container");

この警告を促します：

jQueryセレクターが効率的に使用されていることを確認します。IDセレクターで始まる子孫セレクターを分割することを提案し、キャッシュされる可能性のある重複したセレクターについて警告します。

だから私の質問は：

これが非効率的である理由と、上記のセレクターを実行するための効率的な方法は何ですか？

私は推測します：

var property_single_location = $("#property").find("[data-role='content']").find(".container");

これは正しい方法ですか？

4

3 に答える 3

156

今日も同じ質問があり、 ScottKosman のおかげで解決策を見つけることができました。

基本的に、答えはIDを個別に選択してから、以下のすべてに使用.find(...)することです。例を挙げてみましょう。

$("#property [data-role='content'] .container");

これに変更すると、PhpStormが幸せになり、明らかに2倍以上速くなる可能性があります。

$("#property").find("[data-role='content'] .container");
于 2013-05-18T02:14:01.167 に答える
19

最近のバージョンのjQueryとブラウザを使用する場合の2つの方法の違いはごくわずかだと思います。私は、idで選択するよりも、組み合わせたセレクターを実行する方が実際には10％高速であることを示すテストを作成し、非常に単純なケースを見つけました。

http://jsperf.com/jquery-find-vs-insel

クラスごとに任意の深さで複数の子を選択する場合、「検索」の方が高速であるように見えます。

http://jsperf.com/jquery-find-vs-insel/7

jQueryフォーラムでこれについていくつかの議論がありましたが、その3年前： https ：//forum.jquery.com/topic/which-jquery-selection-is-efficient ここで指摘されているように、同じIDセレクターでの操作では、最上位の要素をキャッシュすることでパフォーマンスが最大に向上します。一方、いくつかの選択を行う場合、パフォーマンスの違いはほとんどありません。

そのため、IntelliJはこのコードスタイルの重要性を誇張していると思います。

于 2013-10-17T16:07:04.293 に答える
14

最初の質問は、Alt + Enterキーを押し、リストの最初のヒントを選択してから、Enterキーを押すことです。これにより、最も効率的な方法が何であるかがわかります。

于 2015-04-17T08:24:05.373 に答える