jQuery选择器与CSS3选择器的性能比较

Question

我是一名刚接触CSS3选择器（或一般的简单CSS选择器）的新手，想了解这些CSS选择器与jQuery或JavaScript选择器之间的性能比较。

假设您有以下内容：

CSS版本

#someID > div:nth-child(2n) { some css .... }

JQuery版本（编辑）

$("#someID").children(":nth-child(even)").css({ some css ....});

使用CSS选择器是否更快，还是使用jQuery选择器来调整一个元素或一组元素涉及的CSS？当集合变得相当大时，特别需要考虑性能。我认为在只有少量项目时，不会有太大的性能差异。

谢谢！

- Matt

---

第一个子选择器“>”在任何情况下都是一个占用资源的操作。 - Diodeus - James MacFarlane

这些选择器示例不匹配。第二个示例选择了一个 ID 为 someID 的元素，它是偶数子元素，而第一个示例选择了一个 div，它是 #someID 的偶数子元素。 - Rob W

是的，我想我搞砸了 jQuery 版本... 尝试着太快地把它组合在一起了。 - Matt

你的编辑完全改变了问题... $("#someID").children(":nth-child(even)") 执行了两个选择。 - BoltClock

@BoltClock 刚刚将 jQuery 更新为选择相同的元素 - 不过使用 CSS 似乎仍然更快，对吗？从你描述的情况来看，它仍然需要运行脚本来评估样式。现在有两个选择，会有更大的影响吗？ - Matt

@Matt：我的意思是jQuery使用了两个单独的选择器，一个用于过滤另一个选择器选定的子元素的结果。这与你的CSS选择器不同，后者只是从右到左进行评估，并使用“>”组合器链接这两个部分。 - BoltClock

Answer 1

jQuery的选择器引擎与CSS共享大多数语法，有效地扩展了选择器标准。这意味着您可以将大多数有效的CSS选择器（带有某些例外）传递给jQuery，它将处理它们。

通过直接传递给document.querySelectorAll()，jQuery优化支持选择器API的现代浏览器的有效CSS选择器。这意味着您的jQuery选择器与等效的CSS选择器具有几乎相同的性能，唯一的开销是$().css()和选择器API调用。

对于不支持选择器API的浏览器，显然，jQuery将非常缓慢，因为它必须自己完成所有繁重的工作。更重要的是，它将在我上面链接的例外以及任何其他浏览器不支持的CSS选择器上简单地失败。

然而，尽管如此，由于浏览器必须运行脚本并评估它，然后才能有机会应用和计算样式，因此jQuery 无论如何都会比较慢。

说实话，即使你有数百个项目，这些都不算什么——浏览器获取标记的时间可能比呈现样式的时间还要长。如果需要进行样式设计，并且CSS支持它，为什么不使用CSS呢？这就是该语言创建的原因。

- BoltClock

---

就此而言，CSS3选择器并不比所谓的“简单”的CSS2和CSS1选择器更“先进”或“复杂”。 - BoltClock

Answer 2

纯CSS一直是更快的，因为它是在浏览器内完成并优化的！

缺点是一些选择器可能不被你所使用的浏览器支持。请查看http://caniuse.com/#feat=css-sel3

- greut

Answer 3

对我来说，如果我使用jQuery，意味着我想在其中加入一些效果，比如说

$("#someID:nth-child(even)").css({ some css ....}).fadeIn('slow');

除此之外，最好使用CSS本身，但无论如何我们几乎看不出它的区别，至少对于一个小范围的系统来说。

我发现了这个网站，可以比较不同JavaScript框架的选择器能力，而jQuery做得很好。 JavaScript框架选择器测试。

- Nazrul Muhaimin