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

Posted 2023-03-05

【中文标题】jquery 选择器与 css3 选择器的性能

【英文标题】：Performance of jquery selectors vs css3 selectors

【发布时间】：2012-02-08 07:02:41

【问题描述】：

我对 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？主要是当集合变得相当大时。我会假设只有少数几个项目不会有太大的性能差异？

谢谢！

【问题讨论】：

第一个子选择器 ">" 在任何一种情况下都是猪。

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

是的，我想我确实搞砸了 jquery 版本......试图把它放在一起快速。

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

@Matt：我的意思是 jQuery 使用了两个独立的选择器，一个用于过滤选择另一个子的结果。这与您的 CSS 选择器形成对比，后者仅从右到左进行评估，> 组合器链接这两个部分。

【参考方案1】：

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

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

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

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

毕竟，老实说，即使您有数百个项目，这也不算多——浏览器获取标记的时间可能比渲染样式的时间要长。如果你需要做样式，并且 CSS 支持它，为什么不使用 CSS 呢？这就是最初创建该语言的原因。

【讨论】：

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

【参考方案2】：

纯 CSS总是会更快，因为它是在浏览器中完成并经过优化的！

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

【参考方案3】：

对我来说，如果我使用 jquery 意味着我想对其施加一些影响，比如

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

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

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

javascript framework selector test