查找/兒童vs後代選擇器jQuery性能差異

我想了解爲什麼this jsperf test中的片段之一似乎比其他片段慢得多。查找/兒童vs後代選擇器jQuery性能差異

這是四個片段：

$(".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();

第二個似乎是在所有瀏覽器中一致慢，我不明白爲什麼。

來源

2012-12-05 George Katsanos

是什麼使第二個與其他人不同？

$('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 
    ...

請注意您需要進行多少次迭代。在所有其他示例中，大多數搜索都是在單個查詢中執行的，該查詢的評估速度要快很多倍。

來源

2012-12-05 14:12:04 VisioN

會有更有效的方式來獲得相同的結果，而使用查找？（或改變我的問題，爲什麼使用後發現，因爲它更慢？） –

@GeorgeKatsanos通常單選擇器執行速度更快。然而，在某些情況下，「find」可能是一顆銀彈。所以，我的答案是：這取決於。 – VisioN

在瀏覽了很多類似的問題後，似乎基準測試與假設情景並沒有多大幫助，因爲基於HTML，瀏覽器，機器等的結果不同。 –

我已經給了性能的兩個例子

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

來源

2014-07-08 04:43:04 prakashstar42

兒童事項的數目。

與許多（比如> 10）兒童$el.find('> selector')進行更好

少數兒童$el.children('selector')執行得更好。

這是因爲children（）遍歷所有的孩子來測試給定的選擇器。

來源

2015-12-21 12:37:22 Semra

查找/兒童vs後代選擇器jQuery性能差異

回答

相關問題