PHPStorm IDEの非効率的なjQuery使用に関する警告

Question

私は最近PHPStorm IDEのバージョンをアップグレードしましたが、非効率的なjQueryの使用について警告しています。例えば

：jQueryのセレクタが効率的な方法で使用される

チェック：

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

、この警告メッセージを表示します。 IDセレクタが先行する子孫セレクタを分割するために を提案し、 はキャッシュ可能な重複セレクタについて警告します。

だから私の質問は次のとおりです。

なぜこの非効率であり、上記のセレクタを行うための効率的な方法は何ですか？私が推測するだろう

：

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

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

Answer 1

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

基本的には、IDを個別に選択し、次に.find(...)を使用します。だからあなたの例を取る：

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

これにそれを変更すると、PhpStormを幸せにすると明らかにmore than twice as fastことができます。

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

Answer 2

私は2つの方法の違いは、最近のjQueryのバージョンとブラウザを使用する場合には無視できると考えています。で、クラスによって、複数の子を選択するため

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

：私はIDの組み合わせセレクタではなく、選択を行い、その後、非常に単純なケースを見つけるために、実際に今10％高速であることを示してテストを構築しましたあなたがいる場合、彼らは、ここで指摘したよう https://forum.jquery.com/topic/which-jquery-selection-is-efficient ：任意の深さは、「見つける」速いように見えるん：

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

jQueryのフォーラムでこのことについていくつかの議論がありましたが、その3歳同じidセ​​レクタで多くの操作を実行すると、最上位要素をキャッシュすることでパフォーマンスが最大限に向上します。 一方、いくつかの選択肢を行っている場合、パフォーマンスの違いはほとんどありません。

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

Answer 3

最初の質問は、Alt + Enterキーを押してリストの最初のヒントを選択し、Enterキーを押すと、最も効果的な方法がわかります。