比较 jquery 选择器的性能答案

【问题标题】：compare jquery selectors performance比较 jquery 选择器的性能
【发布时间】：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 的使用都围绕着选择器，所以本文会花一些时间来介绍它们。

基本上要记住几件事：

【讨论】：

一个问题，你的意思是在元素上使用id还是使用getElementById？
有些 jQuery 选择器委托给原生 DOM 检查方法。文章对此进行了详细介绍。因此，如果您有一个最终委托给getElementById 的选择器，那么它将执行得更快。

【解决方案3】：

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

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

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

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

【讨论】：

【解决方案4】：

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

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

【讨论】：