Performance issues when not destroying map or using multiple maps

I’m submitting a … (check one with “x”) [ x ] question [ ] any problem or bug report [ ] feature request

The plugin version: (check one with “x”) [ x ] 2.0-beta3 (github) [ ] 2.0 (npm)

If you choose ‘problem or bug report’, please select OS: (check one with “x”) [ x ] Android [ ] iOS

cordova information: (run $> cordova plugin list)

insert the output from the command here

If you use @ionic-native/google-maps, please show me the package.json

Current behavior:

Hello! Just upgrading from 1.4 to 2.0.0 stable. We find on Android that we get a violation eg. ‘setTimeOut handler took 200ms cordova.plugin HTML elements cdv-plugin.js 168’. As version 2.0 needs to know all the z-index and html elements in the DOM tree -it’s slow if it has to traverse all DOM nodes in an SPA. Thus, initializing a destroyed map or creating multiple is not feasible solution for us. It has been tried. We do not destroy map for several reasons, so what we did was fork the plugin and set the interval to 50ms only if map shows so it can determine HTML element positioning etc. Now, there is a possible issue that persists when leaving map *though we prevent the interval from occurring except on that initial mapShow(), as we keep map covered in our DOM. Partly as mentioned, because we don’t like the lag/flicker/delay getting the map to render immediately. This is not an uncommon problem.

Mapping all the HTML and Z-Index’s in DOM nodes is far too heavy and as others have mentioned some flexibility here would be great as we do not want any DOM traversal constantly occurring. In our fork, we hacked a fix so we can leave map where the user left it. We know where we want it. I see some helpful things in 2.0.2 and 2.0.3 pertaining to DOM also so hope there. We prevent the putHTML elements if map is not showing. But if it is showing we run it. I think there is either another func or method similar to how the interval pings determine positioning, that are happening far too often and eating resources even after leaving map, and effectively pausing/slowing performance in the rest of app, as memory/DOM reads are being diverted. Thoroughly reviewed the code but perhaps you have an idea without us having to put up project demo code, of something new in 2 that acts in a similar fashion and could be cause ongoing resources after leaving the map, but keeping map alive with setInterval effectively paused.

Have reviewed all code pretty extensively and we tried stopping the loop for background color as explained near the bottom here, but to no avail. Examples of our new code and 1 of the functions to show how we handle it are posted below. https://github.com/mapsplugin/cordova-plugin-googlemaps/issues/224

googlemaps-cdv-plugin.js line 7 window.preventMap = true;

  setInterval(function() {

    // Show the map when preventMap becomes false;
    if(!window.preventMap){
        putHtmlElements();
    }
  }, 50);

– function putHtmlElements() {

  if(preventMap){
    return false;
  }


  var mapIDs = Object.keys(MAPS);
  if (isChecking) {
    return;
  }
  if (mapIDs.length === 0) {
    cordova_exec(null, null, 'CordovaGoogleMaps', 'pause', []);
    isSuspended = true;
    return;
  }
  if (isSuspended) {
    isSuspended = false;
    cordova_exec(null, null, 'CordovaGoogleMaps', 'resume', []);
  }
  isChecking = true;

  //-------------------------------------------
  // If there is no visible map, stop checking
  //-------------------------------------------
  var visibleMapDivList, i, mapId, map;
  visibleMapList = [];
  for (i = 0; i < mapIDs.length; i++) {
    mapId = mapIDs[i];
    map = MAPS[mapId];
    if (map && map.getVisible() && map.getDiv() && common.shouldWatchByNative(map.getDiv())) {
      visibleMapList.push(mapId);
    }
  }
  if (idlingCnt > -1 && visibleMapList.length === 0 && Object.keys(MAPS).length === 0) {
    idlingCnt++;
    if (!isSuspended) {
      cordova_exec(null, null, 'CordovaGoogleMaps', 'pause', []);
      isSuspended = true;
    }
    //if (idlingCnt < 5) {
    //  setTimeout(putHtmlElements, 50);
    //}
    isChecking = false;
    return;
  }
  if (isSuspended) {
    isSuspended = false;
    cordova_exec(null, null, 'CordovaGoogleMaps', 'resume', []);
  }

Expected behavior: Leaving map = not resource requesting map, that sits and waits to be resumed, without being destroyed. Shit there and shut-up, map. We’ll be back at you in a few mins, or hrs. Stay put. 😃

[danielcrk]

I was having some performance issues due to the DOM polling this plugin does and didn’t know that map.setDiv(null) actually stopped polling.

If you control map visibility programatically in your app like like this, it’s trivial to work around all performance issues.

@wf9a5m75 Maybe we should add something about this in the docs? We don’t need to be technical end mention DOM watching etc, but maybe just something like “set map.setDiv(null) when your app leaves the map view, for example changes tabs, opens a modal over the map etc”. I think this might help alot of people noticing the jerky scrolling due to DOM watching.

[wf9a5m75]

I’m not sure you understand map.setDiv(null) meaning. This statement does not remove the map completely. It detaches the native map view from the visible layer, and stop the inspection. If all maps are detached, the plugin does not inspect the DOM tree.

Then if you want to use the map again, you can do map.setDiv(mapDiv).

This saves the map instance in background.

If you still feel the plugin inspect even the map(s) is detached, please share your project files on github. I will inspect it.