Снижает ли производительность множество addEventListner?

Question

[liltrill]

Всем привет!)

У меня каждый модуль что то делает и за что то отвечает, и в каждом есть метод addEvent который вешает прослушивание и вызывает нужный метод например onClick, и в onClick происходит проверка нужно ли что то делать этому модулю или нет.

И таких модулей на странице уже 19 штук. Это 19 addEventListner.

Внизу странице есть вызовы модулей:
new nameWepback.NameModule();
......................................................
......................19............................

Как такое на производительность влияет?) И что можно сделать.

Comments

[Пашенька]

Конечно снижает и память ест. Вешать один лисэнер на документ.

Answer 1

[abberati]

Если при уничтожении модулей вы отписываетесь, то всё в порядке. Памяти хватит надолго. А вот если не отписываться — память будет «течь».

Answer 2

[dollar]

Если в большинстве случаев стоит не очень сложная проверка, то нагрузки не будет. Точнее, она будет незначительной. Собственно, такая проверка и нужна, чтобы не было нагрузки от (холостой) работы модуля (к примеру, перерисовывания, что и так нормально нарисовано).

Если у вас в каждом модуле одним и те же проверки, и они довольно сложные (например, поиск, сортировка), то стоит задуматься о смене архитектуры.

Но всё равно, конечное решение (ответ на вопрос) зависит от текущих замеров производительности. Даже если убрав все модули, вы снизите нагрузку в 1000 раз, то есть время работы всех этих обработчиков упадёт с 1 мс до 1 нс, то оно того не стоит. А вот если время лага уменьшится всего лишь в 10 раз, то есть с 1 с до 100 мс, то это уже полезно.

Попробуйте воспользоваться функцией:
performance.now()
Для измерения производительности. Можно делать замеры до и после работы кода, которого вы считаете достаточно тяжелым, и потом считать разницу.

Comments

[liltrill]

Во всех модулях только вот такая проверка:

let element = event.target
if (!element.closest('ident')) return;

Спасибо за ответ, понял что все нормально))