jQuery的單個選擇VS .find（）

哪個更好作爲性能的角度來使用：jQuery的單個選擇VS .find（）

$(".div1 h2, .div1 h3")

或

$(".div1").find("h2, h3")

來源

2011-06-03 Dan

要找出你可以剖析你的代碼：http://jsperf.com/ – 2011-06-03 17:03:38

看到[這個答案]（http://stackoverflow.com/a/12177876/323407）爲一個非性能相關但重要的區別。就個人而言，我不會擔心微秒的差異，除非代碼將循環運行，或者您正在編寫一個將由第三方使用的庫。 – Tgr 2012-08-30 21:52:02

問題往往是一樣的，10⁶x 1microsec使1秒:) – 2014-04-04 08:13:36

你的問題的答案是：是的。

不要擔心性能差異，除非你的代碼很慢。如果是，則使用分析器確定瓶頸。

從分析的觀點來看：

$(".div1 h2, div1 h3")

應更快jQuery將管它通過querySelectorAll（如果它存在）和本機代碼將運行比非本地代碼更快。它還可以保存一個附加的函數調用。

$(".div1").find("h2, h3")

是，如果你打算更好地對.div1鏈接其他一些功能：

$(".div1").find("h2, h3").addClass('foo').end().show();

來源

2011-06-03 17:14:22 zzzzBov

對我來說「慢」意味着對於大多數JS功能來說，超過大約0.3s。沒有辦法讓瀏覽器掛起1秒鐘，更不用說10.如果它通過了我的「慢門檻」，我會重構代碼並分析性能。 – zzzzBov 2011-06-03 17:21:46

是的，你是對的，在這種情況下，性能差異並不是什麼大不了的事情。但要小心這句話。我有點受到傷害，看到幾個性能問題和人們在思考「如果它的工作，我不在乎」... – BrunoLM 2011-06-03 17:25:38

我的意思是，你不應該擔心性能，除非它是一個問題。我從來沒有說過懶惰的代碼是好的，但我不介意O（n^3）循環集，如果他們是可以理解的並且不會導致性能問題。如果他們這樣做了，我一定會努力將它們儘可能地減少到O（n）。 – zzzzBov 2011-06-03 17:28:23

http://jsperf.com/selector-vs-find-again

選擇更快

（注：由隨機html組成，因此它不僅僅是頁面上的那些元素）

來源

2011-06-03 17:06:26

哇，你很快;）。 – Thai 2011-06-03 17:08:31

+14

這是實際的答案;而不僅僅是「沒關係」。這很重要，因爲OP問道。 – Akash 2013-08-23 22:50:40

你有什麼元素可以讓它更快嗎？我本能地認爲發現速度更快。所以我很好奇它是什麼讓它變慢。 – Ar3s 2014-06-09 23:40:51

使用jsPerf。

I created one for you。

來源

2011-06-03 17:06:43 Thai

其實，.find（）CAN更快。

當試圖選擇多個元素時，選擇器似乎會更快找到;然而，如果你使用$ .find，甚至緩存後代，你可以看到它更快： http://jsperf.com/selector-vs-find-again/11

我也乞求不同性能不重要。在這個智能手機的世界裏，電池壽命是重中之重。

來源

2013-01-03 15:55:17 Drath

這很有趣，但在這種情況下，它不會搜索只有'div1'後裔的'h2'和'h3'。 – Dan 2013-01-04 12:38:15

@Dan「find cache」實際上使用了div1，但只是將其緩存爲：'var cache = $（「。div1」）;' 也就是說，Firefox似乎並不認爲速度更快。在這種情況下，你是正確的，「速度查找」會找到所有'h2'' h3'，但是很容易直接給它們類，如：$ .find（「。classh2，.classh3」）'到目標具體的。 – Drath 2013-01-04 14:13:36

我剛剛找到這個答案，並希望在這裏添加一些數字，可能會有人發現他們有幫助和好奇。在我的情況下，我尋找最快的jQuery選擇器爲獨特的元素。我不喜歡沒有理由地添加ID，所以我想方設法選擇沒有ID的元素。

在我的小型研究中，我使用了非常棒的selector profiler for jQuery。這裏是我從Chrome的控制檯解僱了，直接後，我加入Profiler的庫代碼代碼：

$.profile.start() 
// Lets 
for (i = 0; i < 10000; i++) { 

    // ID with class vs. ID with find(class) 
    $("#main-menu .top-bar"); 
    $("#main-menu").find(".top-bar"); 

    // Class only vs element with class 
    $(".top-bar"); 
    $("nav.top-bar"); 

    // Class only vs class-in-class 
    $(".sticky"); 
    $(".contain-to-grid.sticky"); 
} 
$.profile.done()

這裏有結果：

jQuery profiling started... 
Selector     Count Total Avg+/-stddev 
#main-menu .top-bar  10000 183ms 0.01ms+/-0.13 
nav.top-bar    10000 182ms 0.01ms+/-0.13 
.contain-to-grid.sti... 10000 178ms 0.01ms+/-0.13 
.top-bar     10000 116ms 0.01ms+/-0.10 
.sticky     10000 115ms 0.01ms+/-0.10 
#main-menu    10000 107ms 0.01ms+/-0.10 
undefined

最慢選擇是這個榜的首位。最快的是在底部。令我驚訝的是，在選擇ID之後，即$('#main-menu')，我發現了單個類選擇器，例如.top-bar和.sticky。乾杯!

來源

2015-08-25 21:11:05 sashaegorov

jQuery的單個選擇VS .find（）

回答

相關問題