Sizzle和document.querySelectorAll有什么区别

Question

据我所知，Sizzle和querySelector/querySelector都是CSS选择器。所以加载Sizzle和执行以下操作有什么区别：

Sizzle("my CSS query")

和

document.querySelectorAll("my CSS query")

此外，我知道Sizzle返回一个元素数组，而querySelectorAll返回一个节点列表（在大多数浏览器中）。我还知道您需要加载Sizzle，并且可以使用文档。仅针对一个元素查询选择器。

那么，在性能上还有其他区别吗？

编辑：我的问题只是关于Sizzle选择器引擎（和querySelectorAll）。请不要涉及jQuery。

Answer 1

Sizzle是一个纯JavaScript CSS选择器引擎，旨在轻松放入主机库。

他们说，这是jQuery项目的衍生产品，但当谈到jQuery和Sizzle之间的区别时，jQuery是一个用来简化人们难以理解的javascript复杂语法的库构建，并得到一个专门由初学者组成的网格。因此，如果您使用JQuery，那么将伴随着大量开销，而Sizzler提供的开销相对较少。

它更倾向于使用querySelector而不是Sizzler，因为这只是一个额外的开销，可以很容易地用VanillaJS完成，所以为什么要浪费它呢。他们都做同样的事。

Answer 2

Sizzle是在querySelectorAll不存在的时候创建的。它的开发在引入querySelectorAll之后继续进行，以通过querySelectorAll的早期实现来解决浏览器错误。

Sizzle本身尝试直接使用querySelectorAll，并且仅在给定浏览器版本不支持选择器或已知选择器有缺陷的情况下使用自己的DOM遍历。因此，对于现代浏览器来说，性能上不应该有明显的差异，因为在这两种情况下都会使用queryselectoral。

与querySelectorAll相比，Sizzle允许定义自定义伪选择器，其缺点是您无法从querySelectorAll提供的性能中受益。

所以现在，如果您不需要自定义伪选择器，就不再需要Sizzle了。只有当您需要针对已知有缺陷的旧浏览器版本时，您才会使用它。