Pizza vs. Memory Leaks

Code Lab at Eventbrite covering how to detect and resolve JavaScript memory leaks using the Chrome Dev Tools.

Transcript

1. Pizza vs. Memory Leaks Eventbrite February 22, 2016 https://speakerdeck.com/mtmckenna/pizza-vs-memory-leaks matt@mtmckenna.com @mattmckenna
2. 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.
3. 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.
4. 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
5. 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().
6. Chrome Task Manager Okay Probably bad
7. Chrome Profiles - Heap Snapshot Okay Probably bad
8. Chrome Timeline - Memory Profiler Okay Probably bad
9. 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/