Question

我试图理解为什么this jsperf test中的一个片段似乎比其他片段慢得多。

以下是四个片段：

$(".menu-vertical li.selected > ul.static").show().parents().show();

$('ul.root').find('li.selected').children('ul.static').show().parents().show();

$("ul.root li.selected > ul.static").show().parents().show();

$('ul.root li.selected').children('ul.static').show().parents().show();

第二个似乎在所有浏览器中一直较慢，我不明白为什么。

Answer 1

是什么让第二个与其他人不同？

$('ul.root')               // you get the collection of all `ul.root`
    .find('li.selected')   // in each collection you search for `li.selected`
    .children('ul.static') // you get `ul.static` children elements of each found
    ...

注意您需要进行多少次迭代。在所有其他示例中，大多数搜索都在单个查询中执行，其评估速度要快许多倍。

Answer 2

我给出了两个表现的例子

 1) find() vs Direct Child(>) selectors vs Child selector

性能测试1 http://jsperf.com/jquery-child-selector-vs-find/2

 2) find() vs Descendant selectors vs Child selector

性能测试2 http://jsperf.com/jquery-child-selector-vs-find/9

Answer 3

孩子的数量很重要。

许多（比如> 10）孩子<form action="https://www.paypal.com/cgi-bin/webscr" method="post" target="_top"> <input type="hidden" name="cmd" value="_s-xclick"> <input type="hidden" name="hosted_button_id" value="{ID GOES HERE}"> <input type="image" src="https://www.paypalobjects.com/es_ES/ES/i/btn/btn_donateCC_LG.gif" border="0" name="submit"> <img alt="" border="0" src="https://www.paypalobjects.com/en_US/i/scr/pixel.gif" width="1" height="1"> </form>表现得更好

有几个孩子$el.find('> selector')表现更好。

因为children（）遍历所有子节点来测试给定的选择器。

查找/儿童vs后代选择器jquery性能差异

3 个答案: