javascript - Google Maps v3 performance issues -

-

i'm experiencing massive performance issues google maps v3 api , not find similar issues when searching problem. problem can seen on browser, i'm focussing on chrome here.

the symptoms:

when zoom map or out of map, fps rate drops drastically leading increadibly bad experience.

my code:

i implemented google map using documentation simple example.

<!doctype html>  <html>    <head>      <title>simple map</title>      <meta name="viewport" content="initial-scale=1.0">      <meta charset="utf-8">      <style>        html, body {          height: 100%;          margin: 0;          padding: 0;        }        #map {          height: 100%;        }      </style>    </head>    <body>      <div id="map"></div>      <script>        var 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>

what tested far:

first of all, going https://maps.google.com , trying out zoom feature (with mouse wheel) yields results. smooth , fps rate @ 60 fps. during tests, opened both official google maps website , small example page, , did following:

in chrome development console enabled "show fps meter". here 2 screenshots taken during 20-second zoom-in-and-zoom-out session both original website , website.

fps on website fps on original website

note original google maps website not seem using gpu memory @ all, while website makes extreme use of it. in moment of taking screenshot @ 146 mb, however, fluctuating between 0-200mb high speed.

the next thing did enable paint flashing feature of development console in chrome, shows rectangles redrawn. again zoomed in , out of map , made screenshots: paint flashing on website paint flashing on original website

here becomes clear website trying repaint changing whilst original google maps website always repaints whole picture. no matter how long keep zooming, original website repaints whole thing , not make use of gpu memory @ all.

now question:

has every experienced similar behavior , there way (maybe settings) let me render map way google doing on website? specific use case makes impossible use google maps performance experiencing.

the reason google maps api it's not same javascript google maps application using.

if take @ resulting map can see map created api, created multiple divs, each div 1 map tile image. during zooming every single tile has re-rendered new image. in network tab can see downloading map tiles images.

on other hand, google maps application has 1 canvas element, , during zooming not downloading images vector data (in google format kind) , rendered canvas. canvas object natively supported , less expensive replacing images using dom elements.


Comments

Post a Comment

Popular posts from this blog

java - Run spring boot application error: Cannot instantiate interface org.springframework.context.ApplicationListener -

-
i have spring project , try make use spring boot , run @ embadded tomcat following : https://spring.io/guides/gs/rest-service/ this application //@configuration //@enableaspectjautoproxy @springbootapplication @componentscan(basepackages = "gux.prome") public class application { public static void main(string[] args) { springapplication.run(application.class, args); } } if use maven command: mvn spring-boot:run , project starts fine, need debug , run main method @ intelij, exception occurs: exception in thread "main" java.lang.illegalargumentexception: cannot instantiate interface org.springframework.context.applicationlistener : org.springframework.boot.logging.classpathloggingapplicationlistener @ org.springframework.boot.springapplication.createspringfactoriesinstances(springapplication.java:414) @ org.springframework.boot.springapplication.getspringfactoriesinstances(springapplication.java:394) @ org.springframework.bo...
Read more

reactjs - React router and this.props.children - how to pass state to this.props.children -

-
i'm using react-router first time , don't know how think in yet. here's how i'm loading components in nested routes. entry point .js reactdom.render( <router history={hashhistory} > <route path="/" component={app}> <route path="models" component={content}> </route> </router>, document.getelementbyid('app') ); app.js render: function() { return ( <div> <header /> {this.props.children} </div> ); } so child of app content component sent in. i'm using flux , app.js has state , listens changes, don't know how pass state down this.props.children. before using react-router app.js defines children explicitly, passing state natural don't see how now. using couple of react helper methods can add state, props , whatever else this.props.children render: function() { var children = react.ch...
Read more

Excel VBA "Microsoft Windows Common Controls 6.0 (SP6)" Location Changes -

-
i have excel workbook used generate quotations customers. there main page user inputs data, , there buttons generate various pdfs , send them customer. however, 1 user consistently getting error preventing generating , sending pdfs. i beleive "microsoft windows common controls 6.0 (sp6)". it's installed on users' computers. on mine, location "c:\windows\syswow64\mscomctl.ocx" on others "c:\windows\system32\mscomctl.ocx" the user experiencing issues on 32-bit machine, "mscomctl.ocx" file should in system32. have manually put in there, , pointed common controls reference in vba it. issue seems keep reverting looking in syswow64. since folder doesn't exist, can't find it, , can't produce pdfs. i thought perhaps issue user running older version of office (2007) there users on 2013 , 2016. thought perhaps mixture of 64-bit , 32-bit users. user gets sent workbook other users (as quotation process goes further, gets passed ...
Read more