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

Atwood’s Law

http://www.codinghorror.com/blog/2007/07/the-principle-of-least-power.html

Any application that can be written in JavaScript,

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

Implement simple algorithms

Support multiple platforms

And JavaScript

It’s like we’ve all become kindergarteners again!

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

2. Confirm there’s a problem

3. Profile and fix the problem

Incognito

Memory Timeline

Heap Snapshots

Chapter 3:Snooping/Sleuthing/Ninja-ing

CPU Profiler

Find the busiest functions

Repeat and compare

Also use the Events and Frames Timelines

Common issues: style thrashing, too many events, fast timers

Use the console console.profile()

console.profileEnd()

Nested profiles

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

Summary

• JavaScript is growing up

• More importantly, JavaScript programmers and the JavaScript ecosystem are growing up

• The Chrome DevTools are a hint of things to come

• Next phase of evolution: Grownup mutant ninjas!