Стратегия оптимизации для создания тысяч информационных окон на карте Google
-
28-10-2019 - |
Вопрос
Я новичок в API Карт Google и только что взял на себя управление приложением RoR, которое отображает до 2000 маркеров на карте с помощью MarkerClusterer, и каждый маркер имеет связанное информационное окно.
Текущая реализация создает массив строк содержимого информационного окна в JavaScript и загружает JavaScript в браузер.В несжатом виде (без сжатия содержимого сервера) размер массива и Javascript может достигать 9 МБ.
Узкие места производительности, связанные с этой реализацией, которые я обнаружил:1.Время на сервере, чтобы создать 2000 строк и поместить их в массив JavaScript.(~ 4-5 секунд) 2.Время на сервере для сжатия многомегабайтного кода JavaScript перед отправкой в браузер.(~2-3 секунды)
Моя первоначальная идея заключалась в том, чтобы создать шаблон для строки содержимого информационного окна, который содержал бы все форматирование HTML, чтобы единственными данными, содержащимися в массиве содержимого информационного окна, были фактические необработанные числа, которые будут отображаться.Это должно значительно сократить время вычислений при сборке массива строк содержимого на сервере и, соответственно, уменьшить объем памяти, потребляемой массивом в браузере.Кроме того, одновременно должно быть открыто только одно информационное окно.
Поскольку я не знаком с API Google Maps v3, я ищу какие-либо рекомендации относительно того, является ли это лучшей стратегией оптимизации.И любые указатели на примеры кода, реализующие этот тип стратегии.
Заранее спасибо,
-Скотт
Решение
Я думаю, вам не следует загружать все 2000 наборов данных в свой массив, а следует использовать один из двух вариантов:
- Вы загружаете только маркеры и информационные окна, которые находятся в текущем окне просмотра.
- Вы загружаете содержимое информационного окна с помощью ajax при нажатии на маркер.