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

如果您确实担心性能问题，您还可以执行

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 2

我将猜测为每个按钮拥有它会更好，因为单击后不需要客户端内存来区分按钮类型(例如if子句)，并且您的操作是直接触发的。但也许jquery隐藏了更多的东西。所以让专家来帮忙吧:)

Answer 3

bind通常比delegate性能更好。委托被设计为在根元素的内容可以更改时使用。

---

编辑:**下面的代码在测试后实际上优化程度较低(令人惊讶)。* *

为了优化你的例子，你可以这样做:

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

这将导致相同的结果，但是您只查找$(".toolbar")一次!

然而，jQuery有一个缓存一些结果的系统。所以我不知道这是否真的优化。

---

EDIT2:在Firebug中测试后:

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");

我得到:

• : 111 ms
• 第二:1323 ms

所以，看起来我给出的替代方案可能会导致相反的性能。

Answer 4

我注意到Chrome(非常快)和IE之间的整体性能差异(一个真正的差距!)