• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
Profiling JavaScript Performance
 

Profiling JavaScript Performance

on

  • 442 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
442
Views on SlideShare
442
Embed Views
0

Actions

Likes
2
Downloads
12
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 Profiling JavaScript Performance Presentation Transcript

    • 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 super powers:  Functional?  Object-oriented?  Interpreted? http://www.zazzle.com/javascript+tshirts Would a real ninja need to hide()?
    • 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.
    • 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.
    • 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.
    • Chapter 2: Taking Out the Trash
    • The Garbage Collector  Primitives vs. Objects  Who are you calling garbage, anyway?  Object Graphs  Roots & Objects  Phases  Scan & Collect
    • 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
    • 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
    • Chapter 3: Snooping/Sleuthing/Ninja-ing
    • 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
    • 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
    • • 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!