Pizza vs. Memory Leaks

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/