2012-01-11 120 views
3

我对css3使用选择器(或一般简单的css选择器)相当陌生,并且对这些css选择器vs jquery或javascript选择器的性能比较感到好奇吗?jquery选择器vs css3选择器的性能

说你有这样的事情:

CSS版本

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

jQuery的版本(编辑)

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

是它往往更快时,您可以使用CSS选择器,或使用jQuery选择器来调整涉及一个元素或一组元素的CSS?主要是当集合变得相当大时。我会认为只有少数项目不会有太大的性能差异?

谢谢!

+2

在这两种情况下,第一个子选择器“>”都是猪。 – 2012-01-11 22:19:08

+0

这些选择器示例不匹配。第二个示例选择ID为“someID”的元素,它是一个偶数子元素,而第一个元素选择一个div,它是#someID的偶数子元素。 – 2012-01-11 22:21:10

+0

是的,我想我搞砸了jQuery版本...试图把它放在一起快。 – Matt 2012-01-11 22:37:17

回答

5

jQuery的选择器引擎股大部分相同的语法为CSS,有效延长标准选择。这意味着您可以将大多数有效的CSS选择器(与some exceptions)传递给jQuery,并且它可以很好地处理它们。

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

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

但是,尽管如此,jQuery 将总是变慢,因为浏览器必须运行脚本并在获得应用和计算样式之前对其进行评估。

毕竟,说实话,即使你有数百个项目,这也不算什么 - 浏览器获取标记所花费的时间比渲染样式所需的时间更长。如果你需要做样式,并且CSS支持它,为什么不使用CSS?这就是为什么该语言是首先创建的。

+0

就此而言,CSS3选择器并不比您所谓的“简单”CSS2和CSS1选择器更“高级”或“复杂”。 – BoltClock 2012-01-12 06:21:09

2

纯粹的CSS将总是由于它在浏览器内完成并进行了优化,所以速度更快!

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

1

对于我来说,如果我使用jquery意味着,我希望把它的一些效果,比如说像

$("#someID:nth-child(even)").css({ some css ....}).fadeIn('slow'); 
从您更好地使用CSS本身

除,但我们几乎没有看到的差异无论如何,至少对于一个小范围系统来说。

我发现这个网页比较来自不同的javascript框架的选择器能力和jquery做得很好。

javascript framework selector test