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
   

   View Slide

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.
   

   View Slide

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.
   

   View Slide

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
   

   View Slide

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().
   

   View Slide

6. Chrome Task Manager
   Okay Probably bad
   

   View Slide

7. Chrome Profiles - Heap Snapshot
   Okay Probably bad
   

   View Slide

8. Chrome Timeline - Memory Profiler
   Okay Probably bad
   

   View Slide

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/
   

   View Slide