Производительность 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

Я заметил общую разницу в производительности (реальный разрыв!) Между Chrome (очень быстрый) и IE. Это следует учитывать при тестировании.

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
}

Это приводит к тому же результату, но вы ищите $ (". Панель инструментов") только один раз!

Однако в 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

Я бы предположил бы , что иметь ее для каждой кнопки было бы лучше, поскольку после щелчка не требовалась память клиента, чтобы различать типы кнопок (например, if clause ), и ваши действиясработал напрямую.но, возможно, jquery скрывает больше вещей.так что пусть специалисты тут помогут :))