Возникает ли дополнительная нагрузка при использовании большого количества обработчиков событий?

Какова разница в производительности между использованием отдельного обработчика для каждого события и одного общего обработчика, когда речь идет о массиве из 200 объектов?
  • 1 марта 2024 г. 3:18
Ответы на вопрос 3
Да, при использовании большого количества обработчиков событий может возникнуть дополнительная нагрузка на систему. Это связано с тем, что каждый обработчик занимает определенное количество памяти и процессорных ресурсов.

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

Как правило, рекомендуется использовать общий обработчик для группы связанных событий, чтобы избежать избыточного потребления ресурсов. Тем не менее, в некоторых случаях, например, при необходимости различной логики обработки для каждого события, может быть целесообразно использовать отдельные обработчики.
Обработчиков у вас в любом случае 200 вешается. 
Вся разница в том, что в первом случае они ссылаются на двести функций, а во втором на одну.
Создание функции требует определённых ресурсов, поэтому оверхед есть. Будет ли он заметным — это другой вопрос. Ответ на него зависит от того, что на самом деле в вашем коде происходит. На компьютере вы, скорее всего, разницы никогда не почувствуете, а вот на очень слабом телефоне при огромном количестве функций может начать тормозить.

P.S. Проще использовать делегирование в таких случаях.
Чёт перебор получился. Можно немного проще: https://codepen.io/yarkovaleksei/pen/xxexQKg?edito... 

const ul = document.createElement('ul');

for (let i = 0; i <= 200; i++) {
    let li = document.createElement('li');
    li.innerText = `Строка ${i + 1}`;
    li.setAttribute('data-index', i + 1);
    ul.append(li);
}

document.body.append(ul);

document
  .querySelector('ul')
  .addEventListener(
    'click',
    function(event) {
      if (!event.target.dataset?.index) {
        return;
      }
      
      console.log(`Клик на строку ${event.target.dataset.index}`);
    }
  );
Похожие вопросы