I used this deck to introduce JavaScript performance profiling at the 5th meeting of the Front-End.IL Meetup: http://j.mp/18TFxin . Tame the Unruly Teenage JavaScript Monster using the Chrome DevTools CPU and Memory profilers.

1. Profiling JavaScript
Performance
Noam Kfir | Sela Group | 2013

2. Chapter 1:
Taming the Unruly Teenage
JavaScript Monster

3. Old Habits Die Hard
 JavaScript used to be just a scripting
language!
 Today, it’s a teenage mutant ninja hybrid
with super powers:
 Functional?
 Object-oriented?
 Interpreted?
http://www.zazzle.com/javascript+tshirts
Would a real ninja need to hide()?

4. You Know You Want To…
 Everybody’s doing it.
 Really. Look around you. The people sitting next to you… they’re doing it.
 You know, JavaScript.

5. Any application that
can be written in
JavaScript,
Atwood’s Law
http://www.codinghorror.com/blog/2007/07/theprinciple-of-least-power.html
will eventually be
written in JavaScript.

6. Most JavaScript Apps Suck
 Programmers don’t know:
 How to organize their code effectively
 Use design patterns
 Work in teams
 It’s like we’ve all become kindergarteners
again!
 Implement simple algorithms
 Support multiple platforms
 And JavaScript
 We have to relearn our “soft” skills.

7. Chapter 2:
Taking Out the Trash

8. The Garbage Collector
 Primitives vs. Objects
 Who are you calling garbage, anyway?
 Object Graphs  Roots & Objects
 Phases  Scan & Collect

9. Memory Allocation
 The new keyword allocates objects
from the young memory pool
 When the pool runs out of memory,
the JavaScript engine forces a GC

10. Profiling to the Rescue
1. Isolate the problem environment
 Incognito
2. Confirm there’s a problem
 Memory Timeline
3. Profile and fix the problem
 Heap Snapshots

11. Chapter 3:
Snooping/Sleuthing/Ninja-ing

12. CPU Profiler
 Find the busiest functions
 Repeat and compare
 Use the console
 console.profile()
 Also use the Events and Frames Timelines
 console.profileEnd()
 Nested profiles
 Common issues: style thrashing, too many
events, fast timers

13. Memory Profiler
 Heap Snapshot: Who’s using memory?
 Heap Allocations: Who’s stealing
memory?
 Common issues: detached elements,
increasing memory pressure, rising object
counts
 Start with the Memory Timeline
 Take two or three snapshots
 Compare!
 Ignore parentheses

14. • JavaScript is growing up
• More importantly, JavaScript
programmers and the
JavaScript ecosystem are
growing up
Summary
• The Chrome DevTools are a
hint of things to come
• Next phase of evolution:
Grownup mutant ninjas!