在 jQuery 中使用选择器的最有效方法是什么？答案

【问题标题】：Most efficient way to use selectors in jQuery?在 jQuery 中使用选择器的最有效方法是什么？
【发布时间】：2011-06-10 15:54:31
【问题描述】：

使用$('.active') 或$('div.active') 更有效吗？我一直避免包含“div”，因为它是我不希望用户下载的 javascript 文件中的额外文本。

【问题讨论】：

【解决方案1】：

旧版本的 IE 将受益于包含 div，因为它们不支持 getElementsByClassName()。

因此，页面上的每个元素都需要选择：

document.getElementsByTagName('*');

...并手动测试它是否具有active 类。

如果你包含div，那么它可以缩小一点，因为它可以做到：

document.getElementsByTagName('div');

...然后只测试那些元素。

当我说旧版本时，我指的是 IE6 和 IE7，因为 IE8+ 支持 querySelectorAll。

编辑：

浏览器支持：

【讨论】：

另一方面，如果按id进行选择，则通过标签名称进行选择会降低效率。例如$('#my_id') 比 $('div#my_id') 更有效。原因几乎相同 - 除了即使是像 IE6 这样过时的浏览器也有getElementById()。
@Kyle：好点。标签名称不应包含在 id-selector 中

【解决方案2】：

这取决于。如果你说的是性能。我在JSPerf: jquery class selector test为大家准备了特别测试。在我的浏览器和计算机上（FF 3.6.13 和 Core 2 Duo 1.6）div.active 有点慢。但发现它是可变的 - 似乎 GC 在这里做了一些事情。

经过几次测试，div.active:

【讨论】：

当我运行了几次测试时，div.active 几乎总是快一点，尽管每次差异都可以忽略不计。
我使用的 FF 版本与您使用的相同。我还在 Safari 中进行了测试。（我在 Chrome 中尝试过，但由于某种原因 javascript 失败。）当结果如此接近时，您确实需要多次运行测试以获得更平衡的结果。

【解决方案3】：

如果它有助于自我记录代码，我喜欢包含标签名称。如果我可以使用

$("nav.primary")

而不是

// this is the primary nav
$(".primary")

我倾向于这样做。

【讨论】：

【解决方案4】：

我想在大页面上获得一些速度的最佳方法是使用 find 来代替。

$(你的容器).find("div.active")

因为你总是？知道你应该看哪里，你可以创建自己的范围。这样浏览器只需要在那个代码区域内进行搜索。

顺便说一句，你不需要关心 css 的大小，永远 :) 当站点处于生产模式时，使用 css 缩小工具来最小化 css。您还可以将您的网络服务器设置为在发送给用户之前自动压缩您的 css 文件。如果您不在每次页面加载时更改您的 css 文件名，浏览器会缓存整个 css 文件。

【讨论】：

【解决方案5】：

jQuery 中的 CSS 选择器曾经像浏览器一样进行过优化，请参阅：http://css-tricks.com/efficiently-rendering-css/

在任何地方指定通用标签，即使使用 ID 或类，也比仅指定 ID 或类要慢得多。见：

以上使用jQuery 1.3。由于 jQuery 1.4 和 Sizzling 选择器引擎的引入，据我了解，这并不重要。见：

就我自己而言，我决定在 CSS 中使用最容易读取的内容，而且我更具体，因为它只解析一次。然而，在 jQuery 中，我更加小心，因为这些选择器可能会在一个页面的生命周期内运行数千次。

【讨论】：