jQuery 选择器 - 按速度排序答案

【问题标题】：jQuery Selectors - In order of speedsjQuery 选择器 - 按速度排序
【发布时间】：2011-11-03 10:12:30
【问题描述】：

我在一年前找到了一篇关于此的文章，但现在找不到了，而且我找到的所有其他文章都不完整。

我想要的是建立一个明确的列表，列出在 jQuery 中选择元素的最快方法

据我了解，如果我有以下情况

<body>
  <div id="container">
    <ul class="count">
      <li>One</li>
      <li>Two</li>
      <li class="selected">Three</li>
    </ul>
  </div>
</body>

按速度顺序（从快到慢）按 ID 选择：

$('#container')

按元素选择：

$('div')

借助元素按类选择

$('ul.count')

在元素的帮助下按元素 ID 的一部分选择（在这种情况下以结尾）

$("div[id$='tainer']")

按类别选择

$('.count')

按元素 ID 的一部分选择（在本例中以结尾）

$("[id$='tainer']")

这是正确的速度顺序吗？我错过了什么吗？

谢谢

【问题讨论】：

在 class 和 id 的帮助下按元素选择在哪里？
您可能会通过the jsperf site 找到快乐。例如this test 很好，this one 很棒！但最重要的是你可以自己写;)
按 ID 搜索不能放在首位。如果将元素上下文作为 $('#myTxtBox','#divContainer') 应用于选择器，它将在顶部突出。

标签： jquery performance selector

【解决方案1】：

选择器的性能取决于几件事。浏览器是主要因素，有 sizzle/querySelectorAll/jsengine 和使用它们的 jquery 版本。基本上，jquery 提高了每个版本的性能，并且很好地根据浏览器选择了最好的可用方法。

浏览器、js 引擎或 jquery 本身的任何更新都可以引发新的“最佳执行者”方法。此外，根据数据的大小和深度，一种方法可能会突然变得比另一种更快。这并不是说查询本身。例如 $('#id .class') 可能不会使用与 $('#id').find('.class') 相同的“引擎”。

总而言之，这不是问题，jquery 已经相当优化了。当我偶然发现性能问题时，这绝不是由于选择器（而是由于 .append()、大、非委托事件或插件，以及总体而言：我的普通旧错误编码）。

如果你真的非常需要 dom 的性能，你必须将性能与“document.getElementbyId”（当你有一个可以使用它的 id 时）和本机“document.querySelectorAll”进行比较，这似乎是本月最快的方法。

【讨论】：

【解决方案2】：

你应该看看这个：在文档的中间）

可以计算出一个值

http://css-tricks.com/855-specifics-on-css-specificity/

【讨论】：