Как влияет большое количество eventListener'ов на производительность веб-страницы?
 

Сабж.

Пишу UserScript задача которого состоит в обработке большого количества изображений (получение неких атрибутов из html тэгов) на веб сайте (которые, кроме того подгружаются AJAX при пролистывании). При событии DOMNodeInserted произвожу манипуляции над каждым изображением, но при пролистывании возникают "тормоза", примерно .5-1 секунд. В связи с этим, чтобы не отрабатывать все за раз, добавлять к каждому изображению eventListener (mousedown, или даже mouseover) который и будет вызывать функцию к каждому требуемому элементу по запросу.

Вот только не знаю, объектов очень много, соответственно создаются до несколько тысяч eventListener'ов. это нормально, это может плохо повлиять на потребление памяти или что-либо еще? И еще - если верхние картинки при пролистывании уничтожаются из DOM то и eventListener'ы пропадают и ничем не грозят?

Простите за уйму невнятного текста, просто не знаю как поступить.

делегация для таких случаев и создана всё верно
но есть одно но

едва ли ваши тормоза связаны с eventListener. Скорее проблема в самой архитектуре.
собственно тут надо смотреть а нельзя ли десятки тысяч элементов хранить в массиве в виде данных, а работать как с dom только с теми десятками что видны в данный момент пользователю на экране.

Если обьект скрывается за область видимости то как дум элемент он уже не нужен, достаточно данных о нём в модели(нашем массиве с данными). Как только обьект может быть виден то есть смысл достать данные из модели и создать в dom Объект на их основании.

Таким образом в dom будет будет поддерживаться минимально возможное количество (десятки/ну сотни элементов), которые будут давать нагрузки в сотни раз меньше чем десятки тысяч объектов, забабаханных в dom дерево. Все элементы так или иначе участвуют в процессе рендеринга/обработки событий/ в том числе и жрут непомерно много памяти.

Точнее сказать смогу если проект покажете.

За статью спасибо.

Если я правильно понял, то продуктивнее сделать один eventListener mouseover для первого ближайшего родительского элемента (который будет общим для всех оперируемых), и постоянно проверять его event.target? В моем случае не могу выбрать другого элемента кроме body и mouseover событие будет работать почти постоянно пока движется мышь, это не будет вызывать бОльшей нагрузки чем большое количество eventListener'ов? Вообщем нужно будет на jsperf тест накатать, что и сделаю позже. Спасибо за ответы