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 clause ），以及动作直接触发。但也许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");

我明白了：

第一名：111ms
第二名：1323ms

所以，看来我给出的替代方案可能导致反作用。

Answer 4

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

jQuery性能：为每个按钮使用选择器或使用一个选择器并检查类？

4 个答案: