Profiling JavaScript
Performance
Noam Kfir | Sela Group | 2013
Chapter 1:
Taming the Unruly Teenage
JavaScript Monster
Old Habits Die Hard

 JavaScript used to be just a scripting
language!

 Today, it’s a teenage mutant ninja hybrid
with ...
You Know You Want To…

 Everybody’s doing it.
 Really. Look around you. The people sitting next to you… they’re doing it...
Any application that
can be written in
JavaScript,

Atwood’s Law
http://www.codinghorror.com/blog/2007/07/theprinciple-of-...
Most JavaScript Apps Suck
 Programmers don’t know:
 How to organize their code effectively
 Use design patterns

 Work...
Chapter 2:
Taking Out the Trash
The Garbage Collector

 Primitives vs. Objects
 Who are you calling garbage, anyway?
 Object Graphs  Roots & Objects
...
Memory Allocation

 The new keyword allocates objects
from the young memory pool
 When the pool runs out of memory,
the ...
Profiling to the Rescue

1. Isolate the problem environment

 Incognito

2. Confirm there’s a problem

 Memory Timeline
...
Chapter 3:
Snooping/Sleuthing/Ninja-ing
CPU Profiler
 Find the busiest functions
 Repeat and compare

 Use the console
 console.profile()

 Also use the Even...
Memory Profiler

 Heap Snapshot: Who’s using memory?
 Heap Allocations: Who’s stealing
memory?
 Common issues: detached...
• JavaScript is growing up
• More importantly, JavaScript
programmers and the
JavaScript ecosystem are
growing up

Summary...
Upcoming SlideShare
Loading in...5
×

Profiling JavaScript Performance

550

Published on

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.

Published in: Technology
0 Comments
6 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
550
On Slideshare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
29
Comments
0
Likes
6
Embeds 0
No embeds

No notes for slide

Profiling JavaScript Performance

  1. 1. Profiling JavaScript Performance Noam Kfir | Sela Group | 2013
  2. 2. Chapter 1: Taming the Unruly Teenage JavaScript Monster
  3. 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. 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. 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. 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. 7. Chapter 2: Taking Out the Trash
  8. 8. The Garbage Collector  Primitives vs. Objects  Who are you calling garbage, anyway?  Object Graphs  Roots & Objects  Phases  Scan & Collect
  9. 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. 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. 11. Chapter 3: Snooping/Sleuthing/Ninja-ing
  12. 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. 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. 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!
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×