jQuery 选择器性能

Question

根据我表达选择器的方式，我的性能存在巨大差异。例如，看看这两个选择器，它们选择完全相同的元素:

A) someTableRow.find("td.someColumnClass").find("span.editMode").find("input")
B) someTableRow.find("td.someColumnClass span.editMode input")

我预计 B) 会更快，因为只有 1 个调用，但实际上我发现 A) 的执行速度大约快 8 倍。我不知道为什么，有人有任何见解吗？谢谢

Answer 1

假设您至少使用 jQuery 1.3(即添加了 Sizzle)，您看到的性能是由于遍历 DOM 的变化所致。来自 here :

Up to and including jQuery 1.2.6 the selector engine worked in a "top down" (or "left to right") manner. jQuery 1.3.x (ie, Sizzle, which jQuery embeds) introduced a "bottom up" (or "right to left") approach to querying the DOM.

在第二个示例(“td.someColumnClass span.editMode input”)中，Sizzle 有效地执行了此操作:

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

但是，在您的第一个示例中，您通过每次调用 find() 来明确限定每个步骤，定义上下文并从那里向下遍历。您正在执行“自上而下”的方法。相当于每一步传入一个上下文，即generally considered a performance booster :

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