选择器：ID 与上下文

Posted 2023-03-05

【中文标题】选择器：ID 与上下文

【英文标题】：Selectors: Id vs. context

【发布时间】：2011-03-25 12:02:46

【问题描述】：

我使用 jQuery。

我已经阅读了很多关于选择器性能和优化我们的 AJAX 应用程序的内容。我希望提高我的选择器性能。我知道所有的 jquery 性能提示。我还没有找到一个问题的确切答案。我正在使用几乎所有当前的 jquery 性能提示，但我的应用程序似乎仍然落后很多。

所以，为了优化，我从选择器开始。

我的问题是：从上下文下降以定位 id 是否比仅定位 id 更快？我看不出有什么区别。

例子：

是

$('#childId', $higherElm);

比刚才更快

$('#childId');

??????

提前致谢。

【问题讨论】：

您是否尝试过分析您的应用程序？除非您看到实际的瓶颈在哪里，否则您可能会优化几乎没有任何好处。

是的，大多数罪魁祸首是 jquery 方法，例如可拖动和调整大小、CSS、CLASS 以及其他一些不直接调用的 jquery 方法。这篇文章主要是为了找出使用哪种 id 选择器方法（我知道它不会有太大的不同）。

酷...这没什么错。另外，并不是说您不知道这一点，请尝试从全局中考虑性能结果。一个特定的单个 API 可能很慢，但要真正解决性能问题，也许您需要考虑为什么调用该 API，并找到避免经常调用它的机会。表演作品更像是一种艺术形式而不是科学，表演工具就是这样，工具，比如油漆的颜色:)

【参考方案1】：

选择一个 ID 绝对是您能做的最快的选择。

添加任何其他内容只会减慢速度。

【参考方案2】：

正如在jQuery source 中看到的那样，$('#id') 只是document.getElementById，而$('#id', context) 是$(context).find('#id')。所以第一个更快。

【讨论】：

是的。此外，由于$('#id', context) 总是最终调用$(context).find('#id')（或者如果context 已经是一个jQuery 对象，甚至可能是context.find('#id') - 不确定/不记得，但它不会改变以下内容......）您可以使用$.find() 版本来获得更快的速度。

【参考方案3】：

不确定您上面描述的语法是否有益，但在 http://www.artzstudio.com/2009/04/jquery-performance-rules/ 上，它确实在规则 #5 中声明使用子查询更快（这是有道理的）......他们使用 $higherElm 进行了演示。不过 find() 语法。

在您的示例中 - 因为它直接映射到作为本机函数调用的 getElementById - 我认为您不会看到太多改进。但是，以元素集为目标的选择器（因此是循环的）可能会看到一些或主要的好处。

【讨论】：

它们在寻找不太具体的元素时速度更快。当通过 id 查找元素时，getElementById 速度非常快，而上下文只是阻碍了。

【参考方案4】：

当您通过“id”进行选择时，上下文并不重要，因为无论如何引擎都会调用getElementById()。上下文在语义上当然很重要，但检查应该很快。 （我想从这个角度来看，拥有上下文应该稍微慢，但如果它对你的页面有实际意义，你就不能停止这样做。）

【参考方案5】：

根据this article，使用更少、更直接的选择器会更快。 #id 比 #id #child 好，至少在 css 中...