Замедляет ли прикрепление нескольких обработчиков нажатий JS страницу?

Question

Возможно, у меня есть 200 обработчиков кликов, которые я должен прикрепить на странице. (Я не могу делегировать их, потому что они связаны с плагином jquery, который должен быть на отдельном элементе)

Интересно, снизит ли производительность столько обработчиков кликов?

Я знаю, что обработчики при наведении курсора / прокрутке потенциально запускаются много раз и могут замедлять работу страницы, однако обработчики нажатий запускаются реже. Но разве просто «слушать» замедляет страницу?

Answer 1

Если у вас есть 200 обработчиков щелчков, каждый из которых прикреплен к отдельному объекту, единственное место, где это немного замедлит вас, - это присоединение 200 обработчиков событий.После того, как они прикреплены, отдельные клики не будут отличаться, независимо от того, имеется ли 200 обработчиков событий на 200 отдельных объектах или 1 обработчик событий на 1 объекте.

Если у вас было 200 обработчиков щелчков на одном объекте,мог видеть замедление при обработке щелчка по этому объекту, потому что ему пришлось бы сделать 200 вызовов функций для выполнения всех 200 обработчиков событий.

Так что, пока все они находятся на отдельных объектах, единственнымЗамедление будет изначально присоединять обработчики событий.Как только они прикреплены, это не влияет на производительность.

Answer 2

Нет, это не так.

Вы правы, обработчики при наведении курсора могут потенциально сильно срабатывать, но простой факт того, что слушатели присоединяются к событиям , не замедляет страницу.

Однако, если у вас есть 200 слушателей на одно событие (что очень маловероятно), это может замедлить вас при запуске события. Опять же, я не думаю, что это так.

Answer 3

конечно обработчики событий не приходят полностью бесплатно, однако они довольно дешевы. Вопрос в том, что делают события, связанные с обработчиками. Обычно рендеринг элементов, анимации и т. Д. Отнимает у браузеров гораздо больше производительности.

Кроме того, существует разница между тем, как реализованы прослушиватели событий. Смотрите, например, это сообщение