Pizza vs. Memory Leaks
Eventbrite
February 22, 2016
https://speakerdeck.com/mtmckenna/pizza-vs-memory-leaks
[email protected]
@mattmckenna
Slide 2
Slide 2 text
What is a Memory Leak?
• A memory leak is...
• ... when your app hangs onto memory for no good
reason.
• ... bad because JS app will slow over time and may
eventually crash.
• ... less likely in a server-rendered app.
Slide 3
Slide 3 text
Does My App Have a Memory Leak?
• You might have a leak if your app's performance
degrades over time or your app's memory usage
increases over time.
Slide 4
Slide 4 text
What About Garbage Collection?
• Garbage collection removes objects from memory when
they can no longer be accessed via a "GC root" (e.g.
"window").
• But JS app developers can still introduce memory leaks
by keeping references to objects they don't need anymore.
• https://developer.mozilla.org/en-US/docs/Web/
JavaScript/Memory_Management
Slide 5
Slide 5 text
Common Ways to Create a Memory Leak
• Remove an element from the DOM, but keep a JS
reference to it.
• Accumulate unnecessary elements within the DOM.
• Use setInterval() but never clear it with clearInterval().
Slide 6
Slide 6 text
Chrome Task Manager
Okay Probably bad
Slide 7
Slide 7 text
Chrome Profiles - Heap Snapshot
Okay Probably bad
Slide 8
Slide 8 text
Chrome Timeline - Memory Profiler
Okay Probably bad
Slide 9
Slide 9 text
Demo + Memory Leak Challenge!
• Demo: https://gist.github.com/mtmckenna/
9b61bf6be19a98774d14
• Challenge: https://github.com/mtmckenna/pizza-vs-
memory-leaks
• More info: https://developers.google.com/web/tools/chrome-
devtools/profile/memory-problems/memory-diagnosis
• Even more info: https://addyosmani.com/blog/taming-the-
unicorn-easing-javascript-memory-profiling-in-devtools/