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 here找到解决方案。

基本上答案是单独选择ID，然后使用.find(...)进行以下任何操作。以你的榜样为例：

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

将其改为此使PhpStorm感到高兴，显然可以more than twice as fast：

$("#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，然后选择列表中的第一个提示，然后按回车键，您将看到它认为最有效的方式。

PHPStorm IDE中的低效jQuery使用警告

3 个答案: