比较 jquery 选择器的性能

Posted 2023-03-05

【中文标题】比较 jquery 选择器的性能

【英文标题】：compare jquery selectors performance

【发布时间】：2011-05-02 04:04:51

【问题描述】：

着眼于提高我的 jquery 选择器的性能。那么任何提示或文章作为最佳性能 jquery 选择器？例如选择一个 div 的 id。在网上任何地方，我都可以提供 html 并比较可用于选择所需元素的不同选择器。

【参考方案1】：

您可以在此处比较选择器性能：http://jsperf.com/

只需设置您的 HTML，包含 jQuery 并将您想要比较的每个选择器作为测试用例。

here 的许多规则仍然适用，然而在 jQuery 1.4.3+ 中游戏发生了一些变化，之后 Sizzle（jQuery 的选择器引擎）将在支持的浏览器中使用 querySelectorAll()它。

【讨论】：

请注意，Sizzle 使用 querySelectorAll() 已有一段时间了。它总是用于document 上下文（即nodeType == 9）。 1.4.3 也引入了在元素节点上使用它（即nodeType == 1）。

【参考方案2】：

This article 详细介绍了 jQuery 选择器及其性能。它主要是关于以正确的方式使用 jQuery。由于很多 jQuery 的使用都围绕着选择器，所以本文会花一些时间来介绍它们。

基本上要记住几件事：

如果您正在寻找性能，请使用委托给本机 DOM 检查方法的选择器（getElementById、getElementsByTagName） 缓存结果 伪选择器会导致性能下降。

【讨论】：

一个问题，你的意思是在元素上使用id还是使用getElementById？

有些 jQuery 选择器委托给原生 DOM 检查方法。文章对此进行了详细介绍。因此，如果您有一个最终委托给getElementById 的选择器，那么它将执行得更快。

【参考方案3】：

这些文章没有解决的一件事是您的出发点是什么。如果您从整个 DOM 树开始，那么这些文章实际上很有用。

但是，如果您要从某个元素开始，则取决于您的搜索内容。我的大多数带有 MVC 模板的动态 javascript 都倾向于抓取执行操作的元素，然后搜索父对象。这消除了在随机生成容器时对其进行唯一命名的需要——从动态开发的角度来看，这使得事情变得容易得多。

虽然搜索近父节点可能不如搜索 ID 快，但与生成和跟踪多个唯一 ID 的时间量和/或性能相比，性能应该可以忽略不计。

与开发中的所有内容一样，“视情况而定”将在这里占据主导地位。

【参考方案4】：

我注意到很多这类问题仅限于不同 jQuery 选择器之间的性能比较。 我最近看到一篇文章，将 jQuery 选择器与其原生 Javascript 对应物进行了比较。

这听起来可能很麻烦，但性能提升是相当可观的。实际上比我想象的要多。

文章： http://www.sitepoint.com/jquery-vs-raw-javascript-1-dom-forms/