jQuery性能：使用每個按鈕的選擇器或使用一個選擇器和檢查類？

Question

使用jQuery，這是更好，性能代價：

添加事件處理程序爲每個按鈕：

$(".toolbar .add").click() { 
    // Add stuff here 
} 

$(".toolbar .remove").click() { 
    // Remove stuff here 
} 

$(".toolbar .clear").click() { 
    // Clear stuff here 
} 

或添加一個事件處理程序，並檢查類（或其他相關屬性），看看哪些採取的行動：

$(".toolbar .button").click() { 
    if($(this).hasClass("add")) 
     // Add stuff here 
    } else if($(this).hasClass("remove")) { 
     // Remove stuff here 
    } else if($(this).hasClass("clear")) { 
     // Clear stuff here 
    } 
} 

或者還有更好的辦法嗎？

（如果這有什麼差別，我實際使用delegate，不bind在我的應用程序）

Answer 1

我會猜有它爲每個按鈕會更好，因爲點擊後無需客戶端內存區分按鈕類型（例如，如果條款），並且您的操作直接觸發。但也許jquery隱藏更多的東西。所以讓專家幫助這裏:)

Answer 2

如果你真的擔心的表現，你可能也做類似

var self = $(this); 
if(self.hasClass("add")) 
    // Add stuff here 
} else if(self.hasClass("remove")) { 
    // Remove stuff here 
} else if(self.hasClass("clear")) { 
    // Clear stuff here 
} 

由於調用$(this)執行一個包裝this成jQuery對象的代碼，這樣你將不會多次這樣做。

Answer 3

bind通常比delegate更好的性能。 Delegate被設計爲在根元素的內容可以改變時使用。

---

編輯：**下面的代碼實際上是經過測試（令人驚訝的）後優化較少。 **

爲了優化你的榜樣，你可以這樣做：

var toolbar = $(".toolbar"); 
$(".add", toolbar).click() { 
    // Add stuff here 
} 

$(".remove", toolbar).click() { 
    // Remove stuff here 
} 

$(".clear", toolbar).click() { 
    // Clear stuff here 
} 

這導致了同樣的結果，但你看看以$（「工具欄」。）只有一次！

但是，jQuery有一個緩存一些結果的系統。所以我不知道這是否真正優化。

---

EDIT2： 測試，在螢火蟲後：

console.time("first"); 
console.log($("div span")); 
console.log($("div a")); 
console.log($("div p")); 
console.timeEnd("first"); 

和：

console.time("second"); 
var div = $("div"); 
console.log($("span", div)); 
console.log($("a", div)); 
console.log($("p", div)); 
console.timeEnd("second"); 

我得到：

• 第一：111ms
• second：1323ms

所以，看起來，我給出的選擇可能會導致反性能。

Answer 4

我注意到Chrome（非常快）和IE之間的整體性能差異（真正的差距！）。這應該在測試時考慮。