web-dev-qa-db-ja.com

PHPStormでのjQueryの非効率的な使用警告IDE

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");

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

jqueryjquery-selectorsperformance
99
Brady

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

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

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

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

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

最近のバージョンの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はこのコードスタイルの重要性を誇張していると思います。

19
Leonya

最初の質問は、Alt + Enterを押して、リストの最初のヒントを選択し、Enterを押すことです。最も効率的な方法と思われるものが表示されます。

14
UnixAgain