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.
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.
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
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!