PHPStorm IDE中的低效jQuery使用警告

Question

我最近升级了我的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");

这是正确的方法吗？

Answer 1

今天我有同样的问题,并且能够找到解决方案,感谢斯科特科斯曼 在这里.

基本上答案是单独选择ID,然后.find(...)用于下面的任何内容.以你的榜样为例:

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

改变它使PhpStorm高兴,显然可以快两倍多:

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

Answer 2

我相信使用最新版本的jQuery和浏览器时这两种方法之间的区别可以忽略不计.我构建了一个测试,表明现在实际上组合选择器实际上要快10%,而不是选择id,然后找到一个非常简单的情况:

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夸大了这种代码风格的重要性.

Answer 3

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