Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Pizza vs. Memory Leaks

Fbf1757de2e4b442a65273b6d0469dbd?s=47 Matt McKenna
February 22, 2016

Pizza vs. Memory Leaks

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


Matt McKenna

February 22, 2016


  1. Pizza vs. Memory Leaks Eventbrite February 22, 2016 https://speakerdeck.com/mtmckenna/pizza-vs-memory-leaks matt@mtmckenna.com

  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/