Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 15.01.2013, 19:56
Кандидат Javascript-наук
Отправить личное сообщение для Bebarr Swallow Посмотреть профиль Найти все сообщения от Bebarr Swallow
 
Регистрация: 17.03.2011
Сообщений: 113

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

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

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

Простите за уйму невнятного текста, просто не знаю как поступить.
Ответить с цитированием
  #2 (permalink)  
Старый 16.01.2013, 00:04
Аватар для danik.js
Профессор
Отправить личное сообщение для danik.js Посмотреть профиль Найти все сообщения от danik.js
 
Регистрация: 11.09.2010
Сообщений: 8,804

http://learn.javascript.ru/event-delegation
Ответить с цитированием
  #3 (permalink)  
Старый 16.01.2013, 01:34
Профессор
Отправить личное сообщение для DjDiablo Посмотреть профиль Найти все сообщения от DjDiablo
 
Регистрация: 04.02.2011
Сообщений: 1,815

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

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

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

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

Точнее сказать смогу если проект покажете.
__________________
Лучше калымить в гандурасе чем гандурасить на колыме

Последний раз редактировалось DjDiablo, 16.01.2013 в 02:12.
Ответить с цитированием
  #4 (permalink)  
Старый 16.01.2013, 03:14
Кандидат Javascript-наук
Отправить личное сообщение для Bebarr Swallow Посмотреть профиль Найти все сообщения от Bebarr Swallow
 
Регистрация: 17.03.2011
Сообщений: 113

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

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



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Как выводить часть элементов страницы через javascript Victim Events/DOM/Window 9 28.12.2011 22:51
Как получиться доступ к элементам не своей страницы? AlkaLoiD Общие вопросы Javascript 4 29.11.2010 12:47
Как поместить iframe в угол страницы? xaknik Events/DOM/Window 4 31.07.2010 02:41
Как разделять страницы при выводе отчета ilshat Events/DOM/Window 7 10.12.2009 10:24
как сделать плавное затухание страницы magistr_bender Элементы интерфейса 1 18.03.2009 14:34