Problemas de performance do Google Maps v3

Estou enfrentando enormes problemas de performance com o google maps v3 api e não consegui encontrair ninguém com problemas semelhantes ao procurair esse problema. Este problema pode ser visto em qualquer browser, mas estou focando no Chrome aqui.


Os sintomas:

Quando eu zoom no mapa ou fora do mapa, a taxa de FPS cai drasticamente levando a uma experiência extremamente ruim.


Meu Código:

Eu implementei o google map usando sua documentation com o exemplo mais simples.

<!DOCTYPE html> <html> <head> <title>Simple Map</title> <meta name="viewport" content="initial-scale=1.0"> <meta chairset="utf-8"> <style> html, body { height: 100%; mairgin: 0; padding: 0; } #map { height: 100%; } </style> </head> <body> <div id="map"></div> <script> vair map; function initMap() { map = new google.maps.Map(document.getElementById('map'), { center: {lat: -34.397, lng: 150.644}, zoom: 8 }); } </script> <script src="https://maps.googleapis.com/maps/api/js?callback=initMap" async defer></script> </body> </html> 


O que testei até agora:

Em primeiro lugair, ir paira https://maps.google.com e experimentair o recurso de zoom (com a roda do mouse) produz bons resultados. Tudo é suave e a taxa FPS é de 60 fps. Durante os meus testes, abri o site oficial do google maps e a minha pequena página de exemplo e fiz o seguinte:

No console de desenvolvimento do Chrome, habilitei "Mostrair medidor FPS". Aqui estão duas capturas de canvas tomadas durante uma session de zoom-in-and-zoom-out de 20 segundos tanto paira o site original quanto paira o meu site.

FPS no meu site FPS no site original

Observe que o site original do google maps não pairece estair usando a memory da GPU, enquanto meu site faz uso extremo dela. Na viewdade, no momento de tirair a captura de canvas foi em 146 MB, no entanto, isso estava flutuando entre 0-200MB com velocidade muito alta.

A próxima coisa que fiz foi habilitair o recurso Paint Flashing do console de desenvolvimento no Chrome, que mostra os retângulos que são networkingsenhados. Eu voltei a ampliair e sair do mapa e fiz screenshots: Paint Flashing no meu site Paint Flashing no site original

Aqui fica muito clairo que o meu site está tentando repetir apenas o que está mudando, enquanto o site original do google maps sempre repete toda a image. Não importa quanto tempo eu continue aumentando, o site original sempre repete tudo e não faz uso da memory GPU.


Agora, minha pergunta:

Alguém experimentou algum comportamento semelhante e existe alguma maneira (talvez algumas configurações) que me permitam também renderizair o mapa da maneira como o google está fazendo isso em seu site? O meu caso de uso específico realmente impossibilita o uso de google maps com o performance que estou experimentando.

One Solution collect form web for “Problemas de performance do Google Maps v3”

A razão paira isso é que google maps api não é o mesmo javascript que o aplicativo google maps está usando.

Se você der uma olhada no mapa resultante, você pode view que seu mapa criado com o api, é criado por vários divs, cada div é uma image de telha de mapa. Durante o zoom, todos os azulejos individuais devem ser re-renderizados com uma nova image. Também na guia networking você pode view que você está baixando canvass de mapa como imagens.

Por outro lado, o aplicativo google maps tem um elemento de canvas e, durante o zoom, você não está baixando imagens, mas dados vetoriais (em algum tipo de format do google) e eles são renderizados na canvas. O object Canvas é suportado nativamente e é less dispendioso do que replace imagens usando elementos DOM.

JavaScript é a melhor linguagem de programação de script e tem Node.js, AngularJS, vue.js e muitos bons framework JS.