JQuery的發現性能

我發現這個：JQuery的發現性能

var $colSelect = $('#stuff').find('.things'); 
$($colSelect).find('img, input, select').addClass("foo");

慢則這樣的：

var $colSelect = $('#stuff').find('.things'); 
$($colSelect).find('img').addClass("foo");      
$($colSelect).find('input').addClass("foo");     
$($colSelect).find('select').addClass("foo");

誰能幫助我理解爲什麼是這樣？具體來說，我注意到IE8的性能提升。

來源

2011-12-08 SergC

在第二種情況下，$ colSelect下的DOM子樹將被遍歷三次。這就是爲什麼它會很慢。

來源

2011-12-08 16:53:39 Nakul

他說速度更快。 –

嗨Nakul，但多數民衆贊成在奇怪的部分，在IE中我看到第二個案件會更快。我正在使用DynaTrace來查看性能。 – SergC

更新2：修改爲反映您所擁有的網格性質。這裏是我在jQuery 1.7.1中的發現（一個是你的頂級代碼，兩個是你的底層代碼）。因爲其他一切都不重要，所以我只選擇了前5個最慢的東西。

Results compareing the two algorithms

正如你可以看到，一個是可能比其他慢的原因是由於函數中將sortOrder（精縮爲U）和/或的Array.sort。這兩個都沒有出現在Two中。這個問題肯定是因爲不得不返回並對結果進行排序。 makeArray（縮小爲上面的s）在1中似乎需要更少的時間，但這並不能抵消必須完成的排序。

更新：I created a jsFiddle to play around with it，我沒有看到兩種方法之間的IE8明顯的差異。也許更多的上下文是需要什麼樣的頁面看起來像/正在應用什麼樣式。它可能與瀏覽器呈現有關，導致您的代碼採取不同的行爲。

IE8有一個內置的分析器。

轉到開發工具（F12）
點擊「配置文件」選項卡
點擊「開始」按鈕
做taht你需要完成
單擊停止，並分析JavaScript的工作調查結果。尋找速度緩慢的事物。重做他們。
重複

使您的JavaScript更好的技巧。儘量不要一直調用$（$ colSelect）。將它保存到像這樣的變量。

var $colSelect = $($('#stuff').find('.things'));

來源

2011-12-08 16:56:15 scottheckel

我已經在緩存$ colSelect – SergC

您不在第二個示例中。 – scottheckel

所以如果$ colSelect是一個jQuery對象，我做了 $（$ colSelect）它會重新搜索dom？相反，我應該做 $ colSelect.find（...... – SergC

我的猜測是，對於第一選擇，jQuery的必須分析選擇，調用JavaScript的getElementsByTagName爲每連接的結果（甚至命令他們在自己的DOM位置的順序）。

第二種情況直接調用JavaScript的getElementsByTagName，不需要其他操作。

本頁面比較表演：http://jsperf.com/jquery-selector-performance-problems

來源

2011-12-08 17:01:05

雖然我仍然感到驚訝，但在我的情況下第一個約800毫秒第二種情況爲60毫秒，所以我真的很想理解，因爲速度要快得多。 – SergC

這個怎麼樣？

$('#stuff .things') 
    .find('img').addClass("foo").end() // .end() returns to '#stuff .things' 
    .find('input').addClass("foo").end() 
    .find('select').addClass("foo");

來源

2011-12-08 17:11:28

JQuery的發現性能

回答

相關問題