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

这样做正确吗？

- Scott

Answer 1

今天我也有同样的问题，幸运的是通过Scott Kosman 这里找到了答案。

基本上，答案是逐个选择ID，然后使用.find(...)查找下面的任何内容。 所以以你的例子为例：

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

将它更改为以下内容将使PhpStorm更加顺畅，而且速度明显快两倍以上:

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

- MikeSchinkel

---

对我来说，$（'#property'）中的$（'[data-role="content"] .container'）更易读。 - n3rd

有趣，我并不觉得那种方法易读，但各有所好，人各有志嘛。 - MikeSchinkel

Answer 2

我认为在使用最近版本的jQuery和浏览器时，两种方法之间的差异可以忽略不计。我构建了一个简单的测试，显示出现在组合选择器比按id选择再查找的速度更快，实际上快了10％：

http://jsperf.com/jquery-find-vs-insel

对于任意深度的通过类选择多个子元素，“find”似乎更快：

http://jsperf.com/jquery-find-vs-insel/7

jQuery论坛中曾经讨论过这个问题，但已经是3年前的事了：https://forum.jquery.com/topic/which-jquery-selection-is-efficient正如他们在这里指出的那样，如果您对相同的id选择器进行大量操作，则通过缓存顶级元素可以获得最大的性能提升。另一方面，如果您仅进行少量选择，则几乎没有性能差异。

因此，我认为IntelliJ过分强调了这种代码风格的重要性。

- Leonya

---

在你的第一个测试中，你使用了直接后代选择器">"。我没有使用">"，而是使用"find"函数来运行你的第一个测试，结果速度更快。http://jsperf.com/jquery-find-vs-insel/12 - beardedlinuxgeek

我觉得最有趣的是，最新版本的Safari浏览器处理直接方法的速度比其他浏览器快了大约25％。我不知道他们做了什么，但显然其他浏览器还没有跟上。 - Uxonith

Answer 3

首先要按下Alt+Enter，然后选择列表中的第一个提示，然后按Enter键，你将看到它认为最有效的方法。

- UnixAgain