jQuery选择器优化

Question

具体在选择器的右侧,而在左侧则不太具体.

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

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

报价来源

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标记