jQuery 性能 - 按数据属性还是按类选择？答案

【问题标题】：jQuery performance - select by data-attr or by class?jQuery 性能 - 按数据属性还是按类选择？
【发布时间】：2012-02-29 04:36:30
【问题描述】：

哪个更快，为什么？通过$('div[data-something]') 或$('div.something') 选择div（用于插件需要）？我倾向于前者，因为它“更干净”。

基于this SO question 我知道我不应该同时使用两者。但是我没有发现这些之间是否有区别。

【问题讨论】：

【解决方案1】：

至少在 Chrome 16 中，there is no difference。但是，如果您使类选择器不那么具体（例如$(".test")），它的性能确实优于其他方法：

这有点出乎意料，因为正如 ShankarSangoli 提到的，我认为 div.test 类选择器会更快。

【讨论】：

在 IE9 上的结果类似，div.something 比 div[data-something] 稍快一点，但都比 .something 慢得多。
@T.J.Crowder - 感谢您在 IE9 中运行它为我节省了几分钟 :) Firefox 再次大同小异。我更新了屏幕截图以包含这些结果。
'.test' 将允许 Sizzle 通过使用 getElementsByClassName 而不是 querySelectorAll 来优化 DOM 选择。在大多数浏览器中，前者目前更快。但是'div.test' 在 IE6 和 IE7 等既不支持 gEBCN 也不支持 qSA 的浏览器中可能会更快，因为它将手动类测试范围缩小到仅 div 元素。
...刚刚在 Opera 中运行了您的测试，正如我所料，结果相反。我一次又一次地看到他们的qSA 比他们的其他一些DOM 选择方法更优化。编辑啊，我应该向下滚动。 TJ 已经掌握了很多此类信息！
@JamesAllardice：这可能只是表明我的电脑比你的慢。这是 jsPerf 的问题之一。当有多个参与者时，您只能在单个浏览器中真正比较不同的测试。

【解决方案2】：

它会因浏览器而异。现在几乎所有的浏览器都支持querySelectorAll，jQuery 会尽可能使用它。 querySelectorAll 可以与属性存在选择器一起使用，所以如果它在那里，jQuery 不必做这项工作，它可以将其卸载到引擎。

对于没有querySelectorAll的旧浏览器，jQuery显然需要做更多的工作，但即使是IE8也有。

与大多数这些事情一样，您最好的选择是：

【讨论】：

【解决方案3】：

按类选择总是比属性选择器快，因为如果浏览器支持，jQuery 会首先尝试使用原生的getElementByCalssName。如果不是，它使用querySelector，它使用 css 选择器来查找页面中的元素。

【讨论】：

不，jQuery 将在几乎所有浏览器上使用querySelectorAll，而不是getElementsByClassName。对于简单的类选择器（不是像 div.test 这样的组合选择器），它将回退到 getElementsByClassName，但无论哪种方式，您都在遵循浏览器自己的 CSS 实现对任何现代事物。
对我来说似乎有点苛刻，但可能是因为您说div.something 总是更快，但事实并非如此。
我没有说div.something 会更快。我说按类选择该属性会更快。
鉴于 OP 的问题，说“按班级选择会更快”意味着您说 div.something 更快。如果你的意思是别的东西（例如，.something），你需要说出来。可能是原因（尽管再次对我来说似乎很苛刻）。