Snappy Means Happy

Performance in Ember Apps

@mixonic

httP://madhatted.com

matt.beale@madhatted.com

201 Created

We build õ-age apps with Ember.js. We take teams from £ to • in no time flat.

http://bit.ly/emberconf-edge

JavaScript

emberjs.jsbin.com/viron/1

Network

Render

Network

Render

emberjs.jsbin.com/viron/1

Web Applications

Ember Applications

Web Performance

Ember Performance

What to think about

How Fast is Fast?

Jakob Nielsen sez

100 ms

1 second

10 seconds

instant

uninterrupted work

the limit of attention

www.nngroup.com/articles/response-times-3-important-limits/

Ilya Grigorik sez

0 - 100ms

100 - 300ms

300 - 1000ms

1 second +

10 seconds +

Instant

slight perceptible delay

perceptible delay

mental context switch

“I’ll come back later”youtu.be/7ubJzEi3HuA?t=4m25s

@mixonic sez

16ms

300ms

1 second +

10 seconds +

60 fps - Animation

snappy

waiting

Lost a user

Opportunities for improvement

Network

Render

NetworkRender

JavaScript

uni.madhatted.com/emberconf/github-list/index.html

Animation, < 16ms

Javascript renDer

Snappy, less than 300 ms

Javascript renDerNetwork

One second and beyond

JavascriptNetwork

Methodology

1. Gather facts 2. Analyze & theorize 3. Change a single thing

1. Gather facts 2. Analyze & theorize 3. Change a single thing 4. Confirm the theory

Real World

Speeding up emberjs.com on a phone

ember.js website, why so slow?

Analyze using a latency emulator & Chrome devtools “Network” tab

1 second

emberjs.com

3.5 seconds

emberjs.com

emberjs.com

16 seconds!

emberjs.com

Charles - www.charlesproxy.com

Slowy - slowyapp.com

Network Link Conditioner - developer.apple.com/...

#1 reproduce mobile latency reliably

#2 create a clean browser environment

No extensions, private window

support.google.com/chrome/answer/2364824?hl=en

#3 measurement & analysis

developers.google.com/chrome-developer-tools/docs/network

#3 measurement & analysis

Blocking JavaScriptAssets in HTML

Assets in CSS

Javascript

CSS

HTMLASSETS

ASSETS

assets

HTML Head JS Network+Parse

✦ Script at the bottom

✦ script async/defer

✦ explicitly load webfont in HTML (via script or link tag)

#4 Solutions

Javascript

CSS

HTMLASSETS

ASSETS

assets

HTML Head JS Network+Parse

#5 confirm the theory

https://github.com/emberjs/website/pull/1337

www.amazon.com/High-Performance-Browser-Networking-performance/dp/1449344763

Making an animation smooth

Janky animation

Using continuous paint, composited borders, Chrome devtools “Timeline”

DOM TREe RENDER TREe

LAYOUT PAINT composite

#1 understanding browsers

#2 Measure

Summary

developers.google.com/chrome-developer-tools/docs/timeline

Better summary

Frames

#2 Measure

developers.google.com/chrome-developer-tools/docs/timeline#frames_mode

JavaScript

#2 Measure

developers.google.com/chrome-developer-tools/docs/timeline#frames_mode

Paint

#2 Measure

developers.google.com/chrome-developer-tools/docs/timeline#frames_mode

Upload to GPU,Compositing

#2 Measure

developers.google.com/chrome-developer-tools/docs/timeline#frames_mode

Open a render console

Special render options

#2 Measure

developers.google.com/chrome-developer-tools/docs/timeline#frames_mode

Live coding OMG.

debugging a janky animation

uni.madhatted.com/emberconf/animation-initial/index.html

uni.madhatted.com/emberconf/animation/index.html

uni.madhatted.com/emberconf/animation-second/index.html

screencast.com/t/TqtMmnvhiQg screencast.com/t/Hl6krsx3lN

Ember.js Property change notifications

Chrome devtools “Timeline”, profiles

1 var person = Ember.Object.extend({ 2 name: 'rick' 3 logNameChange: function(){ 4 console.log('observing name!'); 5 }.observes('name') 6 }); 7 8 person.set('name', 'bob'); 9 console.log('after name!');

#1 understanding observers

1 var person = Ember.Object.extend({ 2 name: 'rick' 3 logNameChange: function(){ 4 console.log('observing name!'); 5 }.observes('name') 6 }); 7 8 person.set('name', 'bob'); 9 console.log('after name!');

Logs first

observers are synchronous

1 var person = Ember.Object.extend({ 2 name: 'rick' 3 somethingExpensive: function(){ 4 // Something really heavy 5 }.observes('name', 'age', 'shoeSize') 6 }); 7 8 person.set('name', 'bob'); 9 person.set('age', 25); 10 person.set('shoeSize', 11);

somethingExpensive, x3

observers are synchronous

1 var person = Ember.Object.extend({ 2 name: 'rick' 3 scheduleSomethingExpensive: function(){ 4 Ember.run.once(this, this.somethingExpensive); 5 }.observes('name', 'age', 'shoeSize'), 6 somethingExpensive: function(){ 7 // Something really heavy 8 } 9 }); 10 11 person.set('name', 'bob'); 12 person.set('age', 25); 13 person.set('shoeSize', 11);

somethingExpensive, once

observers are synchronous

#2 profiler

Processing

Memory

developers.google.com/chrome-developer-tools/docs/cpu-profiling

#2 profiler

Modesdevelopers.google.com/chrome-developer-tools/docs/cpu-profiling#flame-chart

#2 profiler

Runloop

jQuery

View Event

developers.google.com/chrome-developer-tools/docs/cpu-profiling#flame-chart

#2 profiler

developers.google.com/chrome-developer-tools/docs/cpu-profiling#flame-chart

#2 profiler

Ember.run(function

developers.google.com/chrome-developer-tools/docs/cpu-profiling#flame-chart

#2 profiler

Queues

developers.google.com/chrome-developer-tools/docs/cpu-profiling#flame-chart

Live coding OMG.

debugging a slow list render

uni.madhatted.com/emberconf/push-into-array/index.html

uni.madhatted.com/emberconf/push-into-array-optimized/index.html

screencast.com/t/GMIHB4q4xyr screencast.com/t/xEagiQzyz

Web Performance

Ember Performance

Javascript

renDer

Network

1. Gather facts 2. Analyze & theorize 3. Change a single thing 4. Confirm the theory

Thanks!

@mixonic

httP://madhatted.com

matt.beale@madhatted.com