Повышение производительности прослушивателей событий для классов CSS, используемых в коде JQuery

Question

Если моя разметка выглядит так:

<button id="button-1" class="nice">
<button id="button-2" class="nice">
<button id="button-3" class="nice">

и я определяю следующий jQuery:

$(".nice").click(function () { 
    // something happens
});

1. Сколько слушателей событий установлено? 1 или 3?

2. Если у меня 1000 кнопок вместо 3, стоит ли вместо этого использовать делегирование событий?

3. Лучше ли с точки зрения производительности не определять вызовы jQuery для классов элементов, если эти классы содержат большое количество элементов в разметке?

Answer 1

1) 3 слушателя событий все указывают на одну и ту же функцию.

2) Это зависит от того, чего вы пытаетесь достичь

3) Попробуйте сделать несколько тестов, посмотрите, где снижение производительности становится заметным. У меня было до 1000 выбранных элементов, которые затем анимировались одновременно - и (в FF) снижение производительности было незаметным до примерно 600-700 элементов. Производительность, конечно, зависит от браузера и движка JS. Некоторые (Chrome) будут быстрее других (IE). Стоит отметить, что для этого сайта я использовал тот же метод, что и у вас в вашем вопросе.

Answer 2

1) 3

2) Да

3) Да, как вы сказали, используйте делегирование событий, которое в jQuery доступно через функцию .live . Будьте осторожны, слишком много функций .live также могут повлиять на производительность, поэтому рассмотрите возможность делегирования собственных событий.

Answer 3

1. Да, , поскольку функция $() возвращает массив, а click() применяется ко всем содержащимся в нем элементам.
2. Да. Делегирование обычно окупается лучше, когда у вас есть большое количество узлов, которые могут вызвать событие, или когда количество этих узлов может измениться. Это позволяет вам только один раз инициализировать прослушиватель событий, независимо от того, что происходит с DOM. Если вы планируете иметь более 100 узлов, я бы использовал делегирование событий вместо обработки событий.
3. Да. Это улучшит как ваше время отклика (особенно для очень больших списков [пожалуйста, сравните тест]), так и сделает вашу инициализацию O (1), а не O (n).

Answer 4

Полностью согласен! Вы должны добавить прослушиватель событий в родительский элемент, содержащий все эти приятные элементы. Это значительно улучшит производительность.