PHPStorm IDE 中的低效 jQuery 使用警告答案

【问题标题】：Inefficient jQuery usage warnings in PHPStorm IDEPHPStorm IDE 中的低效 jQuery 使用警告
【发布时间】：2012-09-22 09:07:02
【问题描述】：

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

这是正确的方法吗？

【问题讨论】：

标签： jquery jquery-selectors performance

【解决方案1】：

我今天也有同样的问题，感谢Scott Kosman here，我找到了解决方案。

基本上，答案是单独选择 ID，然后将.find(...) 用于以下任何内容。以你为例：

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

把它改成这样会让 PhpStorm 很高兴，显然可以是more than twice as fast：

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

【讨论】：

我的口味 $('[data-role="content"] .container', '#property');更具可读性。
@n3rd 有趣的是，我觉得这种方法根本不可读，但他们对每个人都有自己的看法。

【解决方案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 夸大了这种代码风格的重要性。

【讨论】：

在您的第一个测试中，您使用的是直接死者选择“>”。我在没有“>”的情况下运行了您的第一个测试，并且使用“查找”更快。 jsperf.com/jquery-find-vs-insel/12
我觉得最有趣的是最新版本的 Safari 处理直接方法的速度最快大约 25%。我不知道他们做了什么，但显然所有其他浏览器都没有流行起来。

【解决方案3】：

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

【讨论】：