Your SlideShare is downloading. ×
Profiling JavaScript Performance
Profiling JavaScript Performance
Profiling JavaScript Performance
Profiling JavaScript Performance
Profiling JavaScript Performance
Profiling JavaScript Performance
Profiling JavaScript Performance
Profiling JavaScript Performance
Profiling JavaScript Performance
Profiling JavaScript Performance
Profiling JavaScript Performance
Profiling JavaScript Performance
Profiling JavaScript Performance
Profiling JavaScript Performance
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Profiling JavaScript Performance

493

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 …

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
493
On Slideshare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
29
Comments
0
Likes
6
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

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!

×