Your SlideShare is downloading. ×
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

470
views

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
5 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
470
On Slideshare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
29
Comments
0
Likes
5
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!

×