PHPStorm IDE 中的低效 jQuery 使用警告
声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow
原文地址: http://stackoverflow.com/questions/12674591/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Inefficient jQuery usage warnings in PHPStorm IDE
提问by Scott
I recently upgraded my version of PHPStorm IDE and it now warns me about inefficient jQuery usage.
我最近升级了我的 PHPStorm IDE 版本,它现在警告我 jQuery 使用效率低下。
For example:
例如:
var property_single_location = $("#property [data-role='content'] .container");
Prompts this warning:
提示此警告:
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.
检查是否以有效的方式使用了 jQuery 选择器。它建议拆分以 ID 选择器开头的后代选择器,并警告可以缓存的重复选择器。
So my question is:
所以我的问题是:
Why is this inefficient and what is the efficient way to do the above selector?
为什么这效率低下,执行上述选择器的有效方法是什么?
I'd guess at:
我猜:
var property_single_location = $("#property").find("[data-role='content']").find(".container");
Is this the right way?
这是正确的方法吗?
回答by MikeSchinkel
I had the same question today and was able to find a solution thanks to Scott Kosmanhere.
今天我遇到了同样的问题,感谢Scott Kosman在这里找到了解决方案。
Basically the answer is to select IDs individually and then use .find(...)
for anything below. So taking your example:
基本上答案是单独选择 ID,然后.find(...)
用于下面的任何内容。所以以你的例子为例:
$("#property [data-role='content'] .container");
Changing it to this makes PhpStorm happy and can evidently be more than twice as fast:
把它改成这样会让 PhpStorm 高兴,而且显然可以快两倍多:
$("#property").find("[data-role='content'] .container");
回答by Leonya
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:
我相信在使用最新版本的 jQuery 和浏览器时,这两种方法之间的区别可以忽略不计。我构建了一个测试,表明现在执行组合选择器实际上比选择 id 快 10%,然后找到一个非常简单的情况:
http://jsperf.com/jquery-find-vs-insel
http://jsperf.com/jquery-find-vs-insel
For selection of multiple children by class at any depth, the "find" does appear to be faster:
对于在任何深度按类别选择多个孩子,“查找”似乎确实更快:
http://jsperf.com/jquery-find-vs-insel/7
http://jsperf.com/jquery-find-vs-insel/7
There was some discussion about this on jQuery forums, but its 3 years old: https://forum.jquery.com/topic/which-jquery-selection-is-efficientAs 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.
在 jQuery 论坛上有一些关于这个的讨论,但它已经 3 岁了:https: //forum.jquery.com/topic/which-jquery-selection-is-efficient正如他们在这里指出的那样,如果你做了很多在同一个 id 选择器上进行操作时,最大的性能改进是通过缓存顶级元素找到的。另一方面,如果您只进行一些选择,则几乎没有性能差异。
Therefor I believe that IntelliJ is overstating the importance of this code style.
因此我认为 IntelliJ 夸大了这种代码风格的重要性。
回答by UnixAgain
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.
第一个问题是按 Alt+Enter,然后选择列表中的第一个提示,然后按 Enter,您将看到它认为最有效的方式。