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

Mat*_*att 4 css performance css-selectors jquery-selectors

我对使用选择器(或一般的简单css选择器)的css3相当新,我很好奇这些css选择器与jquery或javascript选择器的性能比较?

说你有这样的事情:

css版本

#someID > div:nth-child(2n) { some css .... }
Run Code Online (Sandbox Code Playgroud)

jquery版本(编辑)

$("#someID").children(":nth-child(even)").css({ some css ....});
Run Code Online (Sandbox Code Playgroud)

是否通常可以更快地使用css选择器,或者使用jquery选择器来调整与元素或元素集相关的css?主要是当集合变得相当大时.我会假设只有少数几个项目没有太大的性能差异?

谢谢!

Bol*_*ock 6

jQuery的选择器引擎与CSS共享大部分相同的语法,有效地扩展了选择器标准.这意味着你可以将大多数有效的CSS选择器(有一些例外)传递给jQuery,它会很好地处理它们.

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

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

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

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