Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Possible memory leak when v-for in development mode #8507

Open
peluprvi opened this issue Jul 17, 2018 · 3 comments
Open

Possible memory leak when v-for in development mode #8507

peluprvi opened this issue Jul 17, 2018 · 3 comments

Comments

@peluprvi
Copy link

Version

2.5.16

Reproduction link

https://codepen.io/anon/pen/KBMaOY

Steps to reproduce

  • Open the codepen https://codepen.io/anon/pen/gjMgzG
  • Click a couple of times to list 0 item, then 1000
  • See the memory increasing
  • Try force GC (trash icon) before measure it
  • Take heap snapshots in Chrome "Memory" tab
  • Watch the memory usage in the Chome task manager (shift esc)
  • Watch the memory usage in OS task manager

What is expected?

Same memory usage after garbage collector

What is actually happening?

Despite the "Performance" tab displays the same memory usage, the "Memory" heap snapshot displays a memory increase.
Also, the both Chrome and OS task managers show the memory only increasing.


It get worse when:

  • Using Vuei18n (even without translating)
  • Having big children components

Tested on:

  • Windows 7 64 Bits
  • Chrome 67.0.3396.99 64 bits

Please, consider that:

  • I may be doing something wrong
  • It can be a Chrome issue
  • It can be an OS issue
@posva
Copy link
Member

posva commented Jul 17, 2018

It seems there is a leak in non-production mode only. You should be fine in production

@posva posva changed the title Possible memory leak when v-for Possible memory leak when v-for in development mode Jul 17, 2018
@peluprvi
Copy link
Author

Thanks for the return @posva .

I also created an issue on vue-i18n, since the memory usage gets way too heavy when using it.
I'm using vue-virtual-scroller too, which do destroy and create a lot for components when paginate or scroll the page.

I don't know how much these can be related, but these two packages together with some complex or deeper components structure are taking a lot of memory usage even on production mode.

Looking into Google task manager, my app tab increases by ~2.400K each item I scroll down/up (each one is destroyed/created in the processes).
In less than a minute scrolling up and down I get get almost 1GB memory usage, production mode or developer tools closed or after GC. And it doesn't go much down after route.

I'm not used to the core code of vue or vue-i18n, but It looks like the installed components structure are getting copied for each nested component in the app, and the GC can't clean that up after destroy that nested components. It can be the way vue-i18n installs itself, I really don't know. The data below is what makes me think about that:

image

@Rikhart
Copy link

Rikhart commented Oct 23, 2018

I have the same issue, any advance about this?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

3 participants