Profiling JavaScript Performance
•Download as PPTX, PDF•
5 likes•931 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 CPU and Memory profilers.
Recommended
Recommended
More Related Content
Similar to Profiling JavaScript Performance
Similar to Profiling JavaScript Performance (20)
More from Noam Kfir
More from Noam Kfir (15)
Recently uploaded
Recently uploaded (20)
Profiling JavaScript Performance
- 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
- 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!