arcgis javascript memory leak

4974
18
10-11-2018 03:38 AM
weili7
by
New Contributor II

I'm trying use client-side feature layer to display tweenty thounds polygon on map, i need add/remove layer frenquenly, i found when a add some layer then remove all of it, chrome memory usage only decrese a small part of it increase. 

there is some code of my app:

create map and mapview:

cosnt map = new Map({
  basemap: 'osm'
})
const mapView = new MapView({
  container: 'viewDiv',
  map,
  center: [xx, yy],
  zoom: 5
})

add layer:

const graphics = _.map(grids, (grid) => ({
  geometry: new Polygon({
    hasZ: false,
    hasM: false,
    rings: grid.ring
  }),

  attributes: {
    ObjectID: grid.id
  }
}))

const layer = new FeatureLayer({
  source: graphics,
  fields, 
  objectIdField: 'ObjectID',
  renderer: renderer, 
  popupTemplate: pTemplate
})
 map.add(layer)

clear layer:

map.removeAll()

I found if i not create MapView(only create Map, and add/remove layer on map) it works fine, does it means i miss call some method on MapView to clear?

============== Update =================

i debug use chrome dev tool memory snapshot, i found when i add then remove layer, there a some object left, e.g. 4.9/esri/layers/graphics/data/DefaultSpatialIndex.js file _.featuresById field, the clean method not called.

0 Kudos
18 Replies
RobertScheitlin__GISP
MVP Emeritus

Wei,

   So the question I have if if you need to add and remove layer from your map then why are you using const for that layer? Because even if you remove the layer you can not reassign that layer with new data or set it to null to clear the memory used by that layer.

0 Kudos
weili7
by
New Contributor II

Hi,

  Sorry for let you misunderstanding, the add layer code is in a Promise.then code block, the layer only reference by map.layers. I try comment map.add(layer), the memory increase then decrease to previous value, i also try comment create MapView code, only create Map, it behavior same as comment map.add(layer). So i'm confusing should i to clear layerViews on MapView instance?

0 Kudos
ReneRubalcava
Frequent Contributor

Also keep in mind that by not creating the MapView, you are not creating the canvas to draw the layer in WebGL in the browser, this will save lots of memory, but of course, you can't see the map. Fetching and rendering the data is where most of the memory usage comes in.

0 Kudos
weili7
by
New Contributor II

Hi,

  Thank you for you response, i'm confusing on why when i delete layer, the memory usage not decrease to before i create layer. In my case, i create 20,000 square on same feature layer, chrome dev tools show memory usage increase from 50M to 250M, then i delete this layer, memory usage decrease from 250M to 150M, there are 100M memory delta, i want figure out why this 100M not be collect by gc.

BrianChristensen
New Contributor

We're also seeing this issue.  We have a SPA and as we repaint the DOM with a new view, the old map memory is retained by the browser.  

0 Kudos
AndrewMurdoch1
Occasional Contributor II

This is still an issue, if we navigate away from the maps the memory isn't getting free'd, it looks like the MapView isn't destroying itself properly.

NilsBabel1
Occasional Contributor

Hi @AndrewMurdoch1 did you ever find a solution to this?  I think I'm running into the same exact problem.

0 Kudos
AndrewMurdoch1
Occasional Contributor II

Not really, we just refresh the site when you move from a map page to any other page, which solves the problem.  It's not ideal but it works.

0 Kudos
NilsBabel1
Occasional Contributor

Thanks Andrew, I just saw your other post communicating with Andy Gup.  I've been communicating with him too.  In my case refreshing the page is not exactly what I want to do.  I have successfully created a service to build the map view.  When a user navigates to the map page they should get a a new map view if it's their first time or the existing one from the service if they are returning there.  I have a github repo doing this that you can check out.  https://github.com/nbabel/MapView-service  In this repo it works and there is not a memory leak.  That is, the map component gets flushed properly on ngOnDestroy.  However, this is just a sample that doesn't really do much.  In my full application I have many layers, graphics, widgets, popups, etc.  Even though I'm using the service the same exact way it doesn't flush the previous map view properly.  I think there must be something I've created that holds on to the view or the DOM node.  I'm going through the painful process of trying to determine that now.  Do you have additional items (widgets, layers, etc.) in your view?