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之间的整体性能差异（真正的差距！）。这应该在测试时考虑。