Download to read offline
Uploaded byGil Steiner
JS memory leaks - the good bad & the ugly
The document discusses JavaScript memory leaks, highlighting their significance in performance management and user experience. It outlines common scenarios of memory leaks, such as unremoved event listeners and excessive concurrent timers, and offers management techniques like lazy loading and memory tracking. The content emphasizes the importance of using developer tools for monitoring memory usage and diagnosing leaks.
JS memory leaks - the good bad & the ugly
- 1. JS Memory Leaks TheGood The Bad & The Ugly
- 2. AGENDA ● When &why should you care? ● Memory management vs leaks ● A wee bit about the GC ● Common scenarios ● Management techniques ● Using the dev tools
- 3. Gil Steiner Front enddeveloper Game developer & designer gilsteiner.com gamesgil@github
- 4. The Good -According to the Bible The Bible unzipped is a few Mb in size. Zipped it’s ~1.4Mb Average computer today has 4- 8Gb in RAM!
- 5. THANK YOU Questions? not sofast...
- 6.
- 7. eMenu - Very limitedsystem - Loads of content - External content - Leaked slowly overnight - Came to a grinding halt
- 8. The Bad They get thebill You pay the price
- 9. Leaks ⊂ Management ●What’s the difference? ● Concurrent usage ○ eMenu ○ Server side ● Media files ○ User generated content ○ Excessive usage - games
- 10. Side effects - Apphalt - Other system processes suffer - Performance hiccups - Client discontent
- 11.
- 12. The Garbage Collector Rootconnection ⛓ Alive Disconnected => Collected
- 13. Leak - Listener+ Anon Function addEventListener without freeing up memory btn.addEventListener(‘click’, onClick) btn.removeEventListener(‘click’, onClick) ---------------- btn.addEventListener(‘click’, _ => …) btn.removeEventListener(‘click’, _=> …) ???
- 14. Solution - Listener+ Anon Function const onClick = _ => ... btn.addEventListener(‘click’, onClick) btn.removeEventListener(‘click’, onClick) // modern browsers will collect if detached // same for intervals etc.
- 15. Leak - setInterval Concurrenttimers lock the object to the root! setInterval(_ => …, 1000) // no way to get rid of + Solution 1: Replace with managed setTimeout - Solution 2: Keep a reference to the interval and clear it on time
- 16. Leak - Hookingto Globals function foo() { bar = 1 // OMG it’s global ! this.bar = 1 // OMG same ! let bar = 1 // phew… // ‘use strict’, linter, TS etc. }
- 17. Memory Management The problem: Unregulatedgraphical assets. Where is the system’s peak? Solutions: Lazy loading/unloading Caching
- 18.
- 19.
- 20. Memory Tracking -Preparation - Single window - Incognito mode - Single tab - Disable all extensions (incognito!) - Check the task manager for memory
- 21. Dev Tools -Performance 1. Switch to memory 2. Start clean 3. Record 4. Observe behavior 5. Understand cause and effect
- 22. The Ugly -Dev Tools 1. Start clean 2. Take 1st snapshot - base 3. Do stuff 4. Take 2nd snapshot - the GC will kick in before recording! 5. Take 3rd snapshot - compare
- 23.
Editor's Notes
- #2 https://auth0.com/blog/four-types-of-leaks-in-your-javascript-code-and-how-to-get-rid-of-them/