Как на стороне клиента принять данные по частям при GET запросе?

Question

[nurzhannogerbek]

Здравсвтуйте, товарищи! Помогите пожалуйста разобраться.

В Vue.js (версия 2.5.17) приложении делаю GET запрос к определенному URL адресу. Backend возвращает большой пул данных по частям с помощью пакета JSONStream. Под большим пулом данных я имею введу ~ 200 000 записей. Данные записи предполагается наносить на Яндекс карту, поэтому pagination или lazy loading не мой вариант.

На данный момент использую пакет axios для обработки GET запроса. Получается axios ждет весь пул данных и лишь потом начинает отрисовку гео-объектов на карте. К слову, каждую запись можно рассматривать как один гео-объект.

Я замерял скорость и пришел к выводу, что самым времязатратным процессом является отрисовка гео-объектов на карте. При этим данный процесс начинается лишь тогда, когда axios примет все данные. Учитывая, все это у меня возник вопрос. Как принять эти данные по частям на стороне клиента?

P.S. Количество записей не могу уменьшить. Axios весь пул данных получает за 5-7 секунд после моей оптимизации на стороне БД, еще 5-8 секунд уходит на отрисовку гео-объектов на карте. Как вы понимаете 10-15 секунд для веб приложение очень много. Поэтому возник вопрос, получать на стороне клиента данные кусками и сразу отрисовывать их на карте параллельно.

Comments

[Rezzov]

Самый адекватный вариант переписывать бекенд. Дробить бекенд на множество запросов. Все.

Answer 1

[Lumore]

Делали примерно такое же, но кол-во объектов было немного меньше.
1) Кэшируйте данные на стороне backend
2) Используйте кластеры
3) Грузите и рендерите метки в зависимости от зума и перемещений на карте

Comments

[nurzhannogerbek]

Здравствуйте! Спасибо за советы.

1. У меня в основном динамические данные. То есть в зависимости от выбранного пользователем периода, на карте будут отображаться разные гео-объекты. Я правильно понимаю, что при первом обращении данные будут грузиться долго, последующие схожие запросы будут грузиться из кэша?
2. Изучу этот вопрос.
3. В моем случаи гео-объектами являются полигоны. Метки я не использую. Получается нужно отобразить гору полигонов на карте целой страны. В зависимости от статуса, полигоны разного цвета. Видя к примеру полигон с красным цветом, пользователь (оператор) понимает, что там есть проблема и уже углубляется в этот полигон и изучает проблему. Поэтому вариант с загрузкой определенных полигонов при зумировании для меня не вариант. Пользователь не будет этого делать. Он будет заходить лишь в то, что видит сразу. Другой вопрос кластеризация, то есть группировать полигоны. При зумировании раскрывать кластер. Не совсем понятно сейчас для меня как это реализовать. Если быть точнее как будут выглядеть данные для кластера на бэкенде.

Answer 2

[eRKa]

Если Вы не можете использовать пагинацию данных, то никак. Если Вы имеете доступ к оптимизации бд, то может имеете доступ и к backend, тогда добавить api, чтобы можно было получать часть данных по параметрам страница и кол-во данных на странице.
А в таком варианте можно посоветовать только отрисовывать параллельно, может пару секунд сэкономится.

Answer 3

[kodwi]

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

Comments

[nurzhannogerbek]

Здравствуйте! В моем случаи гео-объектами являются полигоны. Метки я не использую. Получается нужно отобразить гору полигонов на карте целой страны. В зависимости от статуса, полигоны разного цвета. Видя к примеру полигон с красным цветом, пользователь (оператор) понимает, что там есть проблема и уже углубляется в этот полигон и изучает проблему. Поэтому вариант с загрузкой определенных полигонов при зумировании для меня не вариант. Пользователь не будет этого делать. Он будет заходить лишь в то, что видит сразу. Другой вопрос кластеризация, то есть группировать полигоны. При зумировании раскрывать кластер. Не совсем понятно сейчас для меня как это реализовать.

Answer 4

[grinat]

Включи gzip. И у меня большие сомнения что яндекс способен отрисовать 200k точек, лефлет да, яндекс точно нет. На слабом компьютере у яндекса уже сотня тормозит. С 200к на каком нибудь айпаде вообще будет ошибка о том что нет памяти. Грузите и рендерите метки в зависимости от зума и перемещений на карте. Но если хочется, то https://developer.mozilla.org/en-US/docs/Web/API/S...

Comments

[nurzhannogerbek]

Здравствуйте! На стороне бэкенда изучу возможность включения gzip. Спасибо за совет!

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

[grinat]

NogerbekNurzhan, работа с полигонами очень ресурсоемка, есть готовые либы под ноду turfjs.org если postgre то постгис, данные кэшировать, обработка только на сервере. И в таких ситуациях только отображение данных для текущего зума и границ просмотра, потому что клиент не вытянет большое число данных. Хотя более чем уверен что хватит их просто упростить, потому что например если тянуть полигоны с опенстритмэп, то обычно полигон с 20к спокойно упрощается до полигона с 500 точками и разница на глаз не видна особо, пруф: polygons.openstreetmap.fr/index.py?id=60189
Также для передачи координат спец формат от гугла, могу сказать что с ним объем данных с примерно в 5 раз сокращается: https://www.npmjs.com/package/google-polyline