PHPStorm IDE中效率低下的jQuery使用警告


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

这是正确的方法吗?

Answers:


156

今天我也有同样的问题,感谢Scott Kosman 在这里找到了解决方案。

基本上,答案是单独选择ID,然后将其.find(...)用于以下任何内容。因此,以您的示例为例:

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

将其更改为此可以使PhpStorm感到满意,并且显然可以快两倍以上

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

1
以我的口味$('[data-role =“ content”] .container','#property'); 更具可读性。
2013年

26
@ n3rd有趣的是,我认为这种方法根本不可读,但是他们对每个人都说。
MikeSchinkel 2013年

19

我认为使用最新版本的jQuery和浏览器时两种方法之间的差异可以忽略不计。我构建了一个测试,该测试表明使用组合选择器而不是对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-efficiency 正如他们在这里指出的,如果您正在做很多事情,在同一个ID选择器上执行操作,可以通过缓存顶级元素来获得最大的性能改进。另一方面,如果您仅做一些选择,则几乎没有性能差异。

因此,我相信IntelliJ夸大了这种代码样式的重要性。


4
在您的第一个测试中,您正在使用直接后方选择“>”。我运行的第一个测试没有“>”,并且使用“ find”更快。jsperf.com/jquery-find-vs-insel/12
beardedlinuxgeek

我发现最有趣的是,最新版本的Safari处理直接方法的速度最快约25%。我不知道他们做了什么,但是显然所有其他浏览器都没有流行。
Uxonith

14

第一个问题是按Alt + Enter,然后选择列表中的第一个提示,然后按Enter,您将看到它认为最有效的方法。

By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.