jquery选择器与css3选择器的性能

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通过将有效的CSS选择器直接传递给document.querySelectorAll()，为支持selectors API的现代浏览器优化了有效的CSS选择器。这意味着您的jQuery选择器将与等效的CSS选择器具有几乎相同的性能，唯一的开销是$().css()和selectors 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做得很好。

javascript framework selector test