jQuery效率

Question

我有一个类似这样的查询：

$('#tabContainer li');

JetBrains WebStorm集成开发环境将其突出显示为低效查询。它建议我使用下面的代码：

$('#tabContainer').find('li')

怎么解释呢？有没有解释这类情况的文档？

Answer 1

在这个article中，有一部分特异性(第四点)。

如果您有$('#tabContainer li')，则将查询文档中的所有li。然后，将检查这些li中的每一个，以查看它们是否具有父#tabContainer。

要获得更快的速度，可以使用$('#tabContainer').find('li')。将在#tabContainer中搜索li，这在文档中是唯一的。

但显然，如果您使用ID进行选择，性能应该不会有太大的提高(从这个question on SO上的答案也谈到了特异性)。

Answer 2

jQuery会将前一个表达式转换成后一个表达式。因此，唯一的区别是jQuery中的一些调用开销。在我看来这是微不足道的。

但是：$('#tabContainer').find('li')提高了可读性(至少对于不太熟悉选择器语法的人来说)，我认为这是使用它的一个很好的理由。

Answer 3

我相信优化的理由是速度。Find可以非常快，但对您的特定用例进行基准测试不会有什么坏处。例如，这里有一个测试，它使用了一些可能的变体，类似于您正在尝试做的事情。

http://jsperf.com/jquery-find-vs-context-sel/9

在这种情况下，find是非常快的。现在，如果你只运行一次选择，那么用哪种方式并不重要，只要它易于阅读/理解它的意图即可。