在將函數應用於jQuery中的單個元素或集合之間效率有差異嗎？

說你必須要麼應用功能，個人DOM元素的選項或它們的列表：在將函數應用於jQuery中的單個元素或集合之間效率有差異嗎？

個人：

$('#element1').click(function() { 
    $(this).hide(); 
    return false; 
}); 
$('#element2').click(function() { 
    $(this).hide(); 
    return false; 
}); 
$('#element3').click(function() { 
    $(this).hide(); 
    return false; 
});

Vs的集合：

$('#element1, #element2, #element3').click(function() { 
    $(this).hide(); 
    return false; 
});

從寫作

除了更少的代碼，將函數應用於集合是否有任何計算優勢？代碼運行速度會更快嗎？

我問的原因是因爲我的元素是JS對象，我需要單獨處理它們。

來源

2012-10-12 TheOne

那麼前者適用一個函數clickhandler一個元素，而後者所從事的工作，以三個要素。所以我假設你想要比較的第一個例子是調用'$（「。element」）。click（...）; $（「按鈕」）單擊（...）。 $（「。form」）。單擊（...）'每個單獨的？ –

我不認爲你可以這樣比較。第一個只有1個元素1處理者vs 3個元素和3個處理者。也許你可以通過創建一個外部函數（'function blahblah（} {}'）並將引用傳遞給jQuery來即興創作。 –

對不起，我更新了這個例子。 – TheOne

實際上，不，沒有明顯的差別。如果你非常注重微觀優化，那麼單獨綁定它們的時間大約是多重選擇器的65％，但是，嚴格地說，只需使用多重選擇器 - 它更具可讀性並且更易於維護。

來源：http://jsperf.com/jquery-selector-performance-problems

來源

2012-10-12 13:33:04 Joe

+1對於指向http://jsperf.com/的指針web開發人員應該學習和使用這個網站來測試這些問題 –

我不認爲使用第二種方法有任何性能改進，如果有任何可以忽略不計。

但是，如果你正在看內存概念第二種方法可能是好的，因爲只有一個內部函數創建，並且所有三個元素都使用相同的引用。

來源

2012-10-12 13:31:33

你確定嗎？我不認爲它使用任何類型的引用，即使當你選擇組合時 –

我的意思是回調函數的引用，第一個方法創建3個內部函數，而第二個創建1個。 –

-1

爲什麼不只是應用在一個類的代碼，這個類添加到您的3個元素:)

$('.hide').click(function() { 
    $(this).hide(); 
    return false; 
});

如果你想爲不同的元素相同的行爲，我認爲這向元素添加類比爲每個元素註冊click事件更好。

，你將擁有這個網站

<a href="#" id="element1" class="hide"></a> 
<a href="#" id="element2" class="hide"></a> 
<a href="#" id="element3" class="hide"></a>

來源

2012-10-12 13:38:42 dervlap

OP並沒有要求另一種方法來實現這種效果，而是在詢問兩者之間的性能差異。 –

在將函數應用於jQuery中的單個元素或集合之間效率有差異嗎？

回答

相關問題