Join GitHub today
GitHub is home to over 40 million developers working together to host and review code, manage projects, and build software together.Sign up
Steps to reproduce
The given code adds a component containing a text (animated with css), removes it and starts again at infinity.
Tested on Chromium 78.0.3904.108 *
What is expected?
Stable memory comsumption
What is actually happening?
Consumption of memory increases until the machine collapses
Could someone make sure the leak doesn't happen when using vanilla js? It doubt this comes from Vue if simply removing the CSS animation removes the leak.
I am aware the test is not really formal. We develop applications for interactive kiosks. On some very limited configurations (equivalent raspberry pi 3) the machine freezes completely in a few hours. By removing all the animations css the problem seems to disappear. I also agree that the problem is not necessarily related to Vuejs, we simply find that memory leaks are located in the browser.
I enclose some images, showing the evolution of the elements not released in time. I voluntarily did not trigger the garbage collector to simulate normal use
Quickly number of detached elements exceed 20000 without being deleted
I tested using https://ygme1.csb.app/ to avoid the whole editor, using chromium on linux. I saw memory increase gradually from ~30mb until around 100-120mb when it dropped back down. None of my snapshots had a large number of detached HTML Div Elements.
I created a vanilla JS repro here. It exhibits similar memory usage, gradually increasing until eventually dropping suddenly.
I'd be curious to know how much of the system memory was in use when the device froze. Do you have a swap partition configured? The out-of-memory killer should kill the process if it exhausts system memory, unless you have a swap partition configured. If it starts swapping it would likely become unresponsive.
What linux distro are you running? Any useful info in the system logs (journalctl on systemd-based distros)?
@cleoo that's important as we can only fix the leak if the problem comes from Vue, not from the browser, which can also create leaks. In that case, the problem should be reported in chromium bug tracker using a vanilla repro like the above.
Thank you for the time devoted to our concern. The system (archlinux) freezes even with swap. I have been monitoring the behavior of a modified installation for two days and confirms that removing the animations only corrects the problem (the memory usage remains stable). The visual damage is not very important, only pictograms (font-awesome) were animated.
I have the same behavior on my development machine, under rpi / arm the release seems not to be done.