Pro Yearly is on sale from $80 to $50! »

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.

Fbf1757de2e4b442a65273b6d0469dbd?s=128

Matt McKenna

February 22, 2016
Tweet

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/