search

framework7io / framework7-vue

Deprecated! Build full featured iOS & Android apps using Framework7 & Vue
http://framework7.io/vue/
MIT License
674 stars 151 forks source link

Memory leak of VueComponent-s on navigation #412

Closed llaszkie closed 6 years ago

llaszkie commented 6 years ago

This is a (multiple allowed):

What you did

I have been chasing a memory leak in our framework7-vue based app and my conclusion is that a root cause is in the framework itself. So I was able to reproduce the behaviour with the template app or your fiddle.

Here the steps:

  1. Warm up an app - just click around for a while.
  2. Then do a simple navigation path: Home -> Right Panel -> About (the second) -> Back
  3. Take a heap snapshot (I've used Google Chrome Devtools)
  4. Repeat the navigation round over the app couple times: Home -> Right Panel -> About (the second) -> Back
  5. Take a heap snapshot again.
  6. Check the difference. The increase is significant (in our app it's about ~7 MB per page change)
  7. Looks like there have been a lot of VueComponent-s created that haven't been GCollected. They also have kept detached DOM elements.

Expected Behavior

No memory leaks while navigating.

Actual Behavior

Check the screenshot too - I've been trying to clean all the listeners I could - but no luck.

my-app-mem-leak-on-navigation

nolimits4web commented 6 years ago

Yeah, sometimes this happens, also i found out it depends on Vue version in some cases, F7 and its router call everything correctly, all components are being destroyed by Vue (beforeDestroy get called), there was also #263 about this, and that time, it was Vue issue. So not sure where to look for it

nolimits4web commented 6 years ago

Let me know if you find anything specific

llaszkie commented 6 years ago

I've tried switching the Vue version: 2.2.1, 2.5.0, 2.5.16 - no impact. I've also noticed that it's not sometimes, but always.

llaszkie commented 6 years ago

Dear Vladimir!

I've been able to fix the issue via above changes. The one for framework7-vue is mostly cosmetic. The crucial are those for framework7. I'm pretty sure that commenting out pageFrom that was leaking the references is not a final fix 😀, but it would be awesome if you could guide how - and where - clean that reference!

llaszkie commented 6 years ago

I will test if it is sufficient to cut the reference while chaining new pageFrom. Stay tuned 😃

nolimits4web commented 6 years ago

but it would be awesome if you could guide how - and where - clean that reference!

Should be done somewhere here, but as you may see, page data is being cleared here:

https://github.com/framework7io/framework7/blob/master/src/modules/router/router-class.js#L1029-L1030

llaszkie commented 6 years ago

So, the only what works for me is cutting off the references. I've tried to keep the feature by preserving the last page. The PRs solve the memory leak problem and seems to be an acceptable trade-off for the feature too.