With all the advancements in technology one would expect memory to be a non-issue. Yet there are times when memory needs to be managed.

1. JS Memory Leaks
The Good 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 end developer
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 so fast...

6. Should You Care?
Sometimes

7. eMenu
- Very limited system
- Loads of content
- External content
- Leaked slowly overnight
- Came to a grinding halt

8. The
Bad
They get the bill
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
- App halt
- Other system processes suffer
- Performance hiccups
- Client discontent

11. Outsourced Garbage Collection

12. The Garbage Collector
Root connection ⛓ 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
Concurrent timers 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 - Hooking to 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:
Unregulated graphical assets. Where is
the system’s peak?
Solutions:
Lazy loading/unloading
Caching

18. Instantiation
Create
Destroy
Create

19. Pooling
Create
Reuse

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. Q&A