Memory leak in Openlayers 6 beta

Versions affected At least versions 6.0.0-beta.8 and 6.0.0-beta.7. This problem is not present in 5.3.0.

Description I have a situation where I need to quickly create and destroy maps. After upgrading to Openlayers 6 beta, I encountered a page crash after a while. The problem is that canvas/map is not destroyed, something is keeping it alive.

Map has three layers:

• Two TileLayers
• One VectorLayer (using the vector mode)

If I don’t initialize the vector layer, the map gets destroyed just fine (so the tile layers are ok). If I initialize the vector layer with just the default styles, map stays in memory after it is supposed to be destroyed.

To Reproduce Map is embedded in Vue.js component. When Vue.js component gets destroyed, the map instance is destroyed before Vue scraps the dom. I clear the vector layer with layer.getSource().clear(), layer.setSource(undefined) and map.removeLayer(layer). Then I try to destroy map with map.setTarget(null) and map = null. However, something stays in the memory. I’ve been hunting the cause with browser memory snapshot, and it clearly shows that canvas is not destroyed:

I’m kind of suspicious of the LabelCache doing something dirty, since it was added to the project this year. If it doesn’t ring any bells, I can try to create a live example of this problem.

Expected behavior Map/canvas does not stay in memory when it’s destroyed.

[ahocevar]

The issue turned out to be something completely different. When #9561 is merged, it will be enough again to call map.setTarget(null) to release all resources.

[ahocevar]

Ok, I see what’s going on: the map renderer has no chance to schedule the removal of layer renderers, which would unregister the listener for label cache changes. See https://codesandbox.io/s/simple-zlehr, which disposes the layer renderer, which makes the leak go away.

I’ll see if we can fix that in the library.