blocks|key|2853920|text|今天我也遇到了同样的问题，多亏了Scott+Kosman+，我才找到了解决方案。|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|2853921|基本上，答案是分别选择is，然后对下面的任何内容使用.find(...)。以你的例子为例：|style|CODE|2853922|$("#property+[data-role='content']+.container");|code-block|syntax|javascript|2853923|将其更改为more+than+twice+as+fast会使PhpStorm感到高兴，并且可以明显地为|2853924|$("#property").find("[data-role='content']+.container");|2853925|entityMap|0|LINK|mutability|MUTABLE|url|https://twitter.com/humantorch|1|http://24ways.org/2011/your-jquery-now-with-less-suck/^0|G|C|0|0|Q|A|0|0|5|N|1|0|0^^$0|@$1|2|3|4|5|6|7|10|8|@]|9|@$A|11|B|12|1|13]]|C|$]]|$1|D|3|E|5|6|7|14|8|@$A|15|B|16|F|G]]|9|@]|C|$]]|$1|H|3|I|5|J|7|17|8|@]|9|@]|C|$K|L]]|$1|M|3|N|5|6|7|18|8|@]|9|@$A|19|B|1A|1|1B]]|C|$]]|$1|O|3|P|5|J|7|1C|8|@]|9|@]|C|$K|L]]|$1|Q|3|-4|5|6|7|1D|8|@]|9|@]|C|$]]]|R|$S|$5|T|U|V|C|$W|X]]|Y|$5|T|U|V|C|$W|Z]]]]

I had the same question today and was able to find a solution thanks to <a href="https://twitter.com/humantorch" rel="noreferrer">Scott Kosman</a> <a href="http://24ways.org/2011/your-jquery-now-with-less-suck/" rel="noreferrer">here</a>.

Basically the answer is to select IDs individually and then use <code>.find(...)</code> for anything below. So taking your example:

<pre><code>$("#property [data-role='content'] .container");
</code></pre>

Changing it to this makes PhpStorm happy and can evidently be <a href="http://24ways.org/2011/your-jquery-now-with-less-suck/" rel="noreferrer">more than twice as fast</a>:

<pre><code>$("#property").find("[data-role='content'] .container");
</code></pre>

blocks|key|212232|text|我认为在使用最新版本的jQuery和浏览器时，这两种方法之间的差异可以忽略不计。我构建了一个测试，它表明，在一个非常简单的情况下，使用组合选择器而不是对id进行选择，然后查找，实际上速度要快10%25：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|212233|http://jsperf.com/jquery-find-vs-insel|offset|length|212234|对于在任何深度按类别选择多个子级，"find“确实看起来更快：|212235|http://jsperf.com/jquery-find-vs-insel/7|212236|在jQuery论坛上有一些关于这方面的讨论，但它已经有3年的历史了：https://forum.jquery.com/topic/which-jquery-selection-is-efficient正如他们在这里指出的，如果你在同一个id选择器上做很多操作，通过缓存顶级元素可以发现最大的性能改进。另一方面，如果您只做了几个选择，则实际上不会有任何性能差异。|212237|因此，我认为IntelliJ夸大了这种代码风格的重要性。|212238|entityMap|0|LINK|mutability|MUTABLE|url|1|2|https://forum.jquery.com/topic/which-jquery-selection-is-efficient^0|0|0|12|0|0|0|0|14|1|0|Y|1U|2|0|0^^$0|@$1|2|3|4|5|6|7|X|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|Y|8|@]|9|@$D|Z|E|10|1|11]]|A|$]]|$1|F|3|G|5|6|7|12|8|@]|9|@]|A|$]]|$1|H|3|I|5|6|7|13|8|@]|9|@$D|14|E|15|1|16]]|A|$]]|$1|J|3|K|5|6|7|17|8|@]|9|@$D|18|E|19|1|1A]]|A|$]]|$1|L|3|M|5|6|7|1B|8|@]|9|@]|A|$]]|$1|N|3|-4|5|6|7|1C|8|@]|9|@]|A|$]]]|O|$P|$5|Q|R|S|A|$T|C]]|U|$5|Q|R|S|A|$T|I]]|V|$5|Q|R|S|A|$T|W]]]]

I believe the difference between the two methods when using recent versions of jQuery and browsers is negligible. I constructed a test that shows that it is now actually 10% faster to do a combined selector rather than selection on id and then find for a very simple case:

<a href="http://jsperf.com/jquery-find-vs-insel" rel="noreferrer">http://jsperf.com/jquery-find-vs-insel</a>

For selection of multiple children by class at any depth, the "find" does appear to be faster:

<a href="http://jsperf.com/jquery-find-vs-insel/7" rel="noreferrer">http://jsperf.com/jquery-find-vs-insel/7</a>

There was some discussion about this on jQuery forums, but its 3 years old:
<a href="https://forum.jquery.com/topic/which-jquery-selection-is-efficient" rel="noreferrer">https://forum.jquery.com/topic/which-jquery-selection-is-efficient</a>
As they point out here, if you are doing a lot of operations on same id selector, the greatest performance improvement is found by caching the top level element.
On the other hand if you are doing just a few selections, there is going to be virtually no performance difference.

Therefor I believe that IntelliJ is overstating the importance of this code style.

blocks|key|2853966|text|第一个问题是点击Alt%2BEnter，选择列表中的第一个提示，然后点击Enter，你会看到它认为最有效的方法是什么。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|2853967|entityMap^0|0^^$0|@$1|2|3|4|5|6|7|D|8|@]|9|@]|A|$]]|$1|B|3|-4|5|6|7|E|8|@]|9|@]|A|$]]]|C|$]]

The first question is to hit Alt+Enter, and select the first tip in the list, then hit Enter, you'll see what it thinks the most efficient way.

I recently upgraded my version of PHPStorm IDE and it now warns me about inefficient jQuery usage.

For example:

<pre><code>var property_single_location = $("#property [data-role='content'] .container");
</code></pre>

Prompts this warning:

<blockquote>
 Checks that jQuery selectors are used in an efficient way. It suggests
 to split descendant selectors which are prefaced with ID selector and
 warns about duplicated selectors which could be cached.
</blockquote>

So my question is:

<blockquote>
 Why is this inefficient and what is the efficient way to do the above selector?
</blockquote>

I'd guess at:

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

Is this the right way?

Inefficient jQuery usage warnings in PHPStorm IDE

集成开发环境

jQuery

我最近升级了我的PHPStorm集成开发环境的版本，它现在警告我jQuery的使用效率低下。例如：var property_single_location = $("#property [data-role='content'] .container");提示此警告：检查jQuery选择器是否以有效的方式使用。它建议拆...

问PHPStorm集成开发环境中的低效jQuery使用警告
EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问PHPStorm集成开发环境中的低效jQuery使用警告EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问PHPStorm集成开发环境中的低效jQuery使用警告
EN