Question

我对使用选择器（或一般的简单css选择器）的css3相当新，我很好奇这些css选择器与jquery或javascript选择器的性能比较？

说你有这样的事情：

css版

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

jquery版本（编辑）

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

使用css选择器通常更快，或者使用jquery选择器来调整与元素或元素集相关的css？主要是当集合变得相当大时。我认为只有少数项目会有很大的性能差异吗？

谢谢！

Answer 1

jQuery的选择器引擎与CSS共享大部分相同的语法，有效地扩展选择器标准。这意味着你可以将大多数有效的CSS选择器（带有some exceptions）传递给jQuery，它会处理它们。

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

对于那些不支持选择器API的浏览器，很明显，jQuery会非常缓慢，因为它必须自己完成所有繁重的工作。更重要的是，它只会失败我链接到上面的异常以及浏览器不支持的任何其他CSS选择器。

然而，尽管如此，jQuery 总是变慢，因为浏览器必须运行脚本并在有机会应用和计算样式之前对其进行评估。

毕竟，老实说，即使你有数百个项目也不多 - 浏览器获取标记的时间可能比呈现样式要长。如果你需要做样式，CSS支持它，为什么不使用CSS呢？这就是为什么首先创建语言的原因。

Answer 2

纯CSS将始终更快，因为它在浏览器中完成并进行了优化！

缺点是您所使用的浏览器可能不支持某些选择器。见http://caniuse.com/#feat=css-sel3

Answer 3

对我来说，如果我使用jquery意味着我想对它产生一些影响，比如

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

除此之外，你最好使用CSS本身，但我们几乎无法看到它的区别，至少对于小范围系统而言。

我发现这个网络比较了来自不同javascript框架的选择器功能，jquery做得很好。