Memory Leaks In Single Page Vue.js Application

Tagged: single page applications, vue.js

This topic has 2 replies, 2 voices, and was last updated 4 years, 3 months ago by shantiscript.

Viewing 3 posts - 1 through 3 (of 3 total)

Author

Posts
2020-06-30 at 1:57 pm #29442
shantiscript
Customer
Hi,
i am building a single page application with vue.js and verge using your lately released vue template.
Thanks a lot for the template, it made the setup process quite fast.

When loading different verge scenes using vue router and the template components a memory leak occurs as the app and scene data is not cleaned up automatically. This causes the app to stop working

I managed to fix this problem by returning the created verge App instance from the createApp() method and then using the app dispose() method to clean up the app.

dispose verge api link

All works well now and i can load as many scenes as i want. Here is the implementation of the script in the vue template
```
<script>
import * as V3DApp from '../verge3d/app.js'

export default {
  name: 'V3DApp',
  props: {
    app: {
      type: String,
      required: true
    }
  },
  data: function() {
    return {
      containerId: V3DApp.CONTAINER_ID,
      vergeApp: null
    }
  },
  mounted: function() {
    this.vergeApp = V3DApp.createApp()
  },
  beforeDestroy() {
    // this.vergeApp.unload()
    this.vergeApp.dispose()
  }
}
</script>
```
The memory footprint of the app sometimes still behaves a bit strange it seems rather big after loading multiple scenes. But that could be just a strange browser behaviour.

Thats why i wanted to ask if there is additional things that should be removed from memory??

-The cleaned up vergeApp instance stays in memory. Should be deleted as well? Not sure if it is auto garbage collected?
– is it enough to call dispose() or do i need to call first unload() and then dispose(). It’s not 100% clear what the difference between dispose and unload is reading the api docs
– is there anything else that should be removed from memory (can’t think of something else but maybe i am missing something)

Thanks for all of your great work on Verge

Kind Regards
Sebastian
2020-07-13 at 2:40 pm #30035

Ivan Lyubovnikov
Staff

Hi Sebastian, sorry for the late answer.

shantiscript wrote:

The memory footprint of the app sometimes still behaves a bit strange it seems rather big after loading multiple scenes. But that could be just a strange browser behaviour.

Thanks for pointing out the issue. We fixed some memory leaks that happened due to dispose() not freeing certain resources. This fix will be available in one of the next verge3d updates.

Also, if you are talking about the memory footprint in chromium (or system’s) task manager, then sometimes it can behave strange. It can grow even if you just reload the page but the amount usually stops at a certain level. Also it tends to grow faster in case if the browser console is opened. It also decreases (but not to the starting level) if you force garbage collection in the DevTools.

On the other hand such tools as the “Javascript Memory” column in the task manager and Memory > Heap Snapshot in the DevTools are more consistent. And right now (considering the aforementioned fix) they don’t show any persistent memory growth.

shantiscript wrote:

Thats why i wanted to ask if there is additional things that should be removed from memory??

Not much, but if you look into the template’s manager/templates/Embeddable/src/v3dApp/app.js file, you can see that there are several event listeners in initFullScreen() that are never removed. I think it’s better to remove them as well.

shantiscript wrote:

-The cleaned up vergeApp instance stays in memory. Should be deleted as well? Not sure if it is auto garbage collected?

You mean the vergeApp property in the V3DApp component? Generally, there’s no point to keep it after you call the dispose method. But if mounted is the only place where you create the reference to vergeApp and it’s called every time you load a scene then the old app instance should be garbage collected normally or at least it becomes not reachable anymore.

shantiscript wrote:

– is it enough to call dispose() or do i need to call first unload() and then dispose(). It’s not 100% clear what the difference between dispose and unload is reading the api docs

It’s enough to call dispose(), because it unloads the scene too and also does some things on top of that. Btw, thanks for the feedback, we’ll update the docs soon.

Here’s the more detailed info about those methods:
“dispose()

Unloads the scene (by calling unload()) and disposes the whole application, which includes cleaning up the application’s renderer and removing the canvas element from the DOM.

The application is no longer usable after disposing. This approach is best suited for cases where the complete clean up is needed.”

“unload(rootObj)

rootObj – (optional) an object to unload along with its children; if no object is given or the given object is the main application scene then the method performs full scene cleanup.

Unloads either a part or the whole scene depending on the parameters.

If the given *rootObj* is one of the scene objects, then this method removes the given object and its descendants from the scene and also frees the related resources (geometries, materials, textures, etc…). If the given *rootObj* is the scene instance itself, then this method performs full scene cleanup, which includes disposing all objects, the scene’s environment, cameras and camera controls, animations, postprocessing, internal webgl objects, etc…

After the application’s scene was fully unloaded the loadScene() method can be used to load a completely new scene. This approach is best suited for loading/unloading multiple scenes without disposing the whole application.”

You can also find the source code for App.js in the SDK. It’s src/extras/App.js inside the SDK directory.

Co-founder and lead developer at Soft8Soft.

2020-07-28 at 2:02 am #30731

shantiscript
Customer

Thanks for the very detailed reply and also for fixing the memory leak of dispose so quickly.
Also the api explanations of dispose and unload are much clearer now. This is very helpful. I want to work on loading models dynamically into scenes and now its clear where and when to use unload instead of dispose.

Thanks
Author

Posts