Могу ли я улучшить рендеринг тысяч элементов с помощью JavaScript jQuery?

Question

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

Вот видео, которое показывает мою текущую реализацию ->https://vid.me/S6PL

Почтовые коды на карте создаются благодаря google.maps.OverlayView классу, который я расширения и создания пользовательских PostalCodeOverlay (которое представлено кружками). Его draw метод заключается в следующий:

PostalCodeOverlay.prototype.draw = function() { 

     var overlayProjection = this.getProjection(); 
     // Handle some positioning stuff here with some properties created before during construction 
     var center = overlayProjection.fromLatLngToDivPixel(new google.maps.LatLng(this.centerLat, this.centerLng)); 
     var div = this.postalCodeOverlayDiv; 
     div.style.position = 'absolute'; 
     div.style.left = (center.x - (width/2)) + 'px'; 
     div.style.top = (center.y - (height/2)) + 'px'; 
     div.style["-moz-border-radius"] = "50%"; 
     div.style["-webkit-border-radius"] = "50%"; 
     div.style["border-radius"] = "50%"; 
     // As I show it the first time with an animation and 
     // the APIs call this method several times (e.g. when 
     // the zoom level of the map changes), I have a custom 
     // boolean property that tells me whether it's the first 
     // time or not 
     if (!this.justCreated) {   
      div.style.width = width + "px"; 
      div.style.height = height + "px"; 
     } 
     else { 
      this.justCreated = false; 
      var $postalCodeOverlayDiv = $(div); // here I get a jQuery reference to the div which represents the overlay (the circle). 
      $postalCodeOverlayDiv.css({ 
       "width": "0", 
       "height": "0", 
       "opacity": "0" 
      }); 
      // Animate it a bit so that it looks nicer when it 
      // is drawn the first time. 
      $postalCodeOverlayDiv.animate({ 
       "opacity": "1", 
       "width": width + "px", 
       "height": height + "px" 
      }, 500); 

     } 
}; 

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

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

Я извлекаю почтовые коды из базы данных через AJAX (я кэширую их благодаря API Google Geocoding локально на моей БД). Запрос, который извлекает их при изменении границ (я использую для этого map.addListener('bounds_changed', function() {...})), является быстрым и возвращается, как только будет выполнен запрос. Возвращенный JSON содержит все почтовые коды в пределах определенных оценок, вычисленных по мере перемещения пользователя по карте (как вы можете видеть из видео). Затем я повторяю этот JSON и для каждой записи (которая представляет почтовый код) я создаю new PostalCodeOverlay(...params...) с относительной информацией.

Проблема, которую вы уже понимаете, заключается в рендеринге: когда дело доходит до рендеринга тысяч элементов, у механизма JavaScript не хватает бит, и карта зависает.

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

Каков наилучший способ решения таких проблем? Есть ли способ сказать JavaScript/jQuery более плавно обрабатывать анимацию, когда базовый набор данных больше? Или, может быть, есть некоторые возможности Google Maps, о которых я не знаю, и могу ли я использовать их в оверлее, который я создал?

В любом случае, некоторые советы будут оценены.

Спасибо за внимание.

Answer 1

Google предлагает этот документ по адресу Too Many Markers для предоставления предложений. Здесь есть несколько вариантов.

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

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

Помимо этого вы можете изучить более эффективный способ нарисовать свои почтовые индексы, удалив границу радиуса или упростив некоторые другие стили CSS (вы не показываете все, что связано с отображением этого div, поэтому мы не можем сделать более конкретные рекомендации). Опять же, вы можете сделать это только при увеличении диапазона выше определенного порога.

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