jQuery选择器优化

具体在选择器的右侧，而在左侧则不太具体。

// unoptimized $('div.data .gonzalez'); // optimized $('.data td.gonzalez'); 

报价来源

1. 有人可以解释为什么较不具体的左边作为CSS选择器更快？

2. 这是一个Sizzle的事情还是同样适用于document.querySelectorAll ？

3. 在CSS文件中使用“类似优化”的CSS选择器是否有任何速度提升？

Answer 1

jQuery的Sizzle Engine从右到左解析选择器，所以这是真的。 但也有例外，例如当第一个操作数是ID时。 然后搜索将在具有此ID的元素的上下文中操作。 这是Sizzle Engine的特殊性，但我不知道querySelectorForAll是如何实现的。

一个例子：

 $('div.data .gonzalez'); 

Sizzle将使用类gonzalez获取所有DOM元素，然后检查每个元素是否祖先是带有类数据的div标记

Answer 2

这本书顺便提到了这一点，但我相当肯定，建议是特定于Sizzle（jQuery选择器引擎），而不是一般。 您的里程可能会有所不同，但实现querySelectorAll的浏览器不太可能显示真实世界的差异。

Sizzle在适当的时候从内到外工作，因此可以查找td.gonzales ，然后查看它是否在.data ，而不是相反。 我记得当Sizzle第一次出现时，这有点令人惊讶，但实际上效果更好。 所以你可以看到为什么后代选择器的右侧越具体越好。

这是一个测试用例 ，在IE7中尝试一下，你会看到一个明显偏好更具体的右侧。 但是在现代浏览器中尝试它，你应该看起来基本没什么区别。

尽管如此，这都是微优化，并且在没有要解决的现实问题的情况下几乎无用，因为它会根据页面上的元素而发生巨大变化。 有用的是要记住，如果你实际上有一个慢选择器导致你在旧版浏览器上遇到麻烦，或许除此之外……