jQuery选择器优化

Question

  

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

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

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

Quote Source

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

2. 这是一个嘶嘶声的事情还是同样适用于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第一次出现时，这有点令人惊讶，但实际上效果更好。所以你可以看到为什么后代选择器的右侧越具体越好。

Here's a test case，在IE7中尝试一下，你会看到对更具体的右手边的明显偏好。但是在现代浏览器中尝试一下，你看起来基本没什么区别。

这是所有的微优化，但在没有现实问题需要解决的情况下几乎无用，因为它会根据页面上的元素而有很大差异。有用的是要记住，如果你实际上有一个慢选择器导致你在旧版浏览器上遇到麻烦，或许除此之外......