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(即加入滋滋声),您所看到的表现是由于该DOM遍历的变化.从这里:

直到并包括jQuery 1.2.6,选择器引擎以"自上而下"(或"从左到右")的方式工作.jQuery的1.3.x中(即,灒,这jQuery的嵌入)引入了"自底向上"(或"从右到左")的方法来查询DOM.

在你的第二个例子中("td.someColumnClass span.editMode input"),Sizzle有效地做到了这一点:

1. 得到所有input元素someTableRow
2. 对于input找到的每个元素,遍历其span元素的祖先树class="editMode".删除input没有这些祖先的元素
3. 对于span.editMode找到的每个元素,遍历其td元素的祖先树class="someColumnClass".删除input没有这些祖先的元素

然而,在您的第一个示例中,您将通过每次调用显式限定每个步骤find(),定义上下文并从那里向下遍历.您正在执行"自上而下"的方法.它相当于在每个步骤传递一个上下文,通常被认为是一个性能助推器:

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