Snappy Means Happy
Performance in Ember Apps
201 Created
We build õ-age apps with Ember.js. We take teams from £ to • in no time flat.
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
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
Recommended
