Обработка событий, которые запускают анимацию - холст / родительский div, когда сотни вложенных элементов - подсказки из карт

Question

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

Я работаю на сайте с двумя версиями, одна из которых находится в webgl, а другая используетSVG.

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

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

До сих пор я обрабатывал такие события, как это: регистрация событий для каждого элемента (их может быть несколько сотен), и в случае, если я пытаюсь свести к минимумурендеринг обновления фрейма анимации, если смотреть на такие условия, как;для webgl я также реализовал выборку, удалив элементы, не отображаемые на экране (это очень помогло).

Это псевдокод для сайта SVG:

Hammer(element).on('touchStart', function(event){

      if (window.scheduledAnimationFrame) return; 

      window.scheduledAnimationFrame = true; 
      if ( condition is satisfied ) {

        requestAnimationFrame( renderingUpdateFunction ); 

      function renderingUpdateFunction() {

          // do smtg

          window.scheduledAnimationFrame = false;

      }

    }

...}, false)

Плюсы в том, что я могу держать код в чистоте и регистрировать копии для всех элементов.Недостатки в том, что, может быть, из-за сотен элементов, плюс другие жесты, связанные с родительскими (например, масштабирование), мобильными телефонами, - и мне трудно отладить именно то, что может быть виновником, поскольку я вижу совершенно другую скорость на рабочем столе инамек на уровень производительности не так уж и плох.

Можете ли вы рассказать о плюсах и минусах использования альтернативных подходов?Я подумал, чтобы прослушать только родитель (будучи родительским div и canvas), проверить координаты касания мышью / пальцем и попытаться определить, какие элементы могут соответствовать этим координатам (думаю, что два элемента могут быть близкими или частично перекрывающимися)?

Для сравнения, как приложения Карт (google, bing, openstreet ...) обрабатывают события: для каждого ориентира, присутствующего на карте, или на холсте?

Я думаю, что онидать некоторое представление о технических проблемах для производительности на объектах с множеством интерактивных точек.