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 更好。 Delegate 旨在在根元素的内容可以更改时使用。

---

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

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

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

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

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

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

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

---

编辑2： 在 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 毫秒
• 秒：1323 毫秒

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

Answer 4

我注意到 Chrome（速度极快）和 IE 之间的整体性能差异（真正的差距！）。测试时应考虑到这一点。