问jQuery选择器性能

EN

假设您使用的是至少jQuery 1.3 (即添加了Sizzle1.3)，那么您看到的性能是由于遍历DOM的更改造成的。来自here

从

到jQuery 1.2.6，选择器引擎以“自顶向下”(或“从左到右”)的方式工作。jQuery 1.3.x (即jQuery嵌入的Sizzle )引入了一种“自下而上”(或“从右向左”)的方法来查询DOM。

在第二个示例("td.someColumnClass span.editMode input")中，Sizzle有效地做到了这一点：

1. 获取someTableRow
2. for中的所有input元素，使用class="editMode"遍历其祖先树中的span元素。删除没有这些ancestors
3. for的input元素找到每个span.editMode元素，使用class="someColumnClass"遍历其祖先树中的td元素。删除不具有这些祖先的input元素

然而，在您的第一个示例中，您使用每个对find()的调用来显式地限定每个步骤，定义一个上下文并从中遍历。您正在执行“自上而下”的方法。它等同于在每个步骤中传入一个上下文，即generally considered a performance booster

$('input', $('span.editMode', $('td.someColumnClass', someTableRow)))

因为您正在减少搜索的上下文。

在情况B中，它必须搜索每个DOM元素以查看它是否满足条件。

在情况A中，is可以很快决定忽略不是"td.someColumnClass“的任何东西，然后它可以获取DOM的子集并忽略不在"span.editMode”中的任何东西。因此，它现在只需要搜索更少的元素来查找“input”。

A是更多的调用，但更简单。B是一个调用，但更复杂。在这种情况下，呼叫的复杂性大大超过了呼叫的数量。