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

我今天也有同样的问题，多亏了Scott Kosman这里，我才找到了解决方案。

基本上，答案是单独选择ID，然后对以下内容使用.find(...)。举个例子：

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

将其更改为这样会让PhpStorm感到高兴，而且速度显然是的两倍多

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

Answer 2

我认为在使用最新版本的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-efficient正如他们在这里指出的，如果您在同一个id选择器上执行大量操作，那么通过缓存顶级元素可以获得最大的性能改进。另一方面，如果你只做一些选择，那么几乎不会有性能差异。

因此，我认为IntelliJ夸大了这种代码风格的重要性。

Answer 3

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