jQuery選擇器性能

我對選擇器性能有一些疑問。jQuery選擇器性能

這是我的標記（簡化）。子div將有兩種可能的類別之一（「未選擇播放列表」或「播放列表選擇」）。

<div class="wrapper"> 
    <div class="playlist-non-selected"></div> 
    <div class="playlist-selected"></div> 
    <div class="playlist-non-selected"></div> 
    <div class="playlist-non-selected"></div> 
</div>

1. 如果我要選擇包裝DIV的所有直接孩子，他們每個人我會用這個執行的操作？

wrapper.find('div.playlist-non-selected, div.playlist-selected').each(function(){ 

});

2. 如果我想選擇特定項目，我會用這個嗎？

wrapper.children('div.playlist-non-selected, div.playlist-selected').eq(2);

或：

wrapper.find('div.playlist-non-selected, div.playlist-selected').eq(2);

或：

wrapper.children('div').eq(2);

這些選擇工作，但我不知道他們是如何有效？

來源

2016-01-02 Toniq

我讀到這個時候的問題是使用頻率。關於效率，如果你要對孩子進行大量操作，緩存wrapper.children（）然後filter（）以獲得你想要處理的內容並繞過dom查找可能是非常人性化的。 – Taplar

如果您想比較不同選擇器的性能，請使用jsperf.com進行測試。沒有基準測試就很難預測性能。 – Barmar

find（）和children（）方法都用於過濾匹配元素的子元素，除了前者向下行進任何級別，後者向下行進一級。

find() - 深入到任何數字，搜索匹配的元素。

children() - 它只是在匹配元素的下一級。

因此，如果find和children返回相同的一組結果，那麼children將做或者等於或少於幾個比較。

比較第三個和第二個，更精確的選擇器效率更高，因爲它會限制比較次數。

因此，三秒鐘之內就是mose高效選擇器。

來源

2016-01-02 17:47:09 void

jquery選擇器功能強大，我發現瞭解它們的最佳方式是簡單地設置代碼，然後在瀏覽器的JavaScript控制檯中進行操作，以查看哪些方法可行。

您還需要根據您的代碼設計思考自己想要做什麼。

在第一種情況下，它看起來像你只是選擇div.wrapper的所有孩子。所以你只能說$('div.wrapper').children()

我不希望看到你有一個硬編碼的數字，如「2」卡在那裏。它可能工作，但你的代碼會非常脆弱。而是用一個類標記特定的項目，然後搜索它。

就效率而言。它的速度非常快，我建議不要擔心。讓代碼工作，把它寫好，然後擔心速度如果有問題

來源

2016-01-02 17:49:32

jQuery選擇器性能

回答

相關問題