The Problem
While developing a small front-end animated web game, I noticed that after leaving the auto-play feature running overnight, memory usage would spike to 1GB.
Before Investigating, Let's Understand Memory Leaks
In computer science, a memory leak is a type of resource leak that occurs when a computer program incorrectly manages memory allocations in such a way that memory which is no longer needed is not released. (Wikipedia)
Understanding the Browser's Garbage Collection Mechanism
Browsers use a reference counting algorithm. Data that is no longer referenced is marked, and a periodic process runs to release that memory.
Using Two Chrome Tools to Analyze the Memory Leak
1. Performance Monitor
- Open Chrome > F12 > More Tools > Performance Monitor
2. Memory Snapshot
Open Chrome > F12 > Memory
Testing Methods
- Refresh the page several times to see if memory usage drops (i.e., if it's being released).
- Leave it running for a long time to see if memory usage grows.
- Compare scenarios with and without
keep-alive. - Use memory snapshots to analyze which JS objects are continuously growing.
I Made Adjustments Primarily Based on This Article About Common Memory Leaks
In the End, I Made Two Adjustments
1. Manually call destroy before a custom component with the Lottie-web animation library is unmounted (via v-if).
beforeDestroy () {
this.lottieAnimation.destroy('game-animation')
this.lottieAnimation = null
this.lottieApi = null
}
2. Because Vue's keep-alive only allows for forcefully clearing the cache, I ultimately decided to remove it. This reduced average memory usage by 30 MB, and after running tests overnight, the memory spike issue was gone.
In Conclusion
After leaving it running overnight, the memory usage finally stopped spiking.
Comments