Profiling JavaScript Performance
Upcoming SlideShare
Loading in...5
×
 

Like this? Share it with your network

Share

Profiling JavaScript Performance

on

  • 587 views

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

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.

Statistics

Views

Total Views
587
Views on SlideShare
587
Embed Views
0

Actions

Likes
3
Downloads
16
Comments
0

0 Embeds 0

No embeds

Accessibility

Categories

Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

Profiling JavaScript Performance Presentation Transcript

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