Diese Präsentation wurde erfolgreich gemeldet.
Wir verwenden Ihre LinkedIn Profilangaben und Informationen zu Ihren Aktivitäten, um Anzeigen zu personalisieren und Ihnen relevantere Inhalte anzuzeigen. Sie können Ihre Anzeigeneinstellungen jederzeit ändern.
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/re...
Ilya Grigorik sez
0 - 100ms
100 - 300ms
300 - 1000ms
1 second +
10 seconds +
Instant
slight perceptible delay
perceptible ...
@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
JavascriptNetw...
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 “Netw...
1 second
emberjs.com
3.5 seconds
emberjs.com
emberjs.com
16 seconds!
emberjs.com
Charles - http://www.charlesproxy.com/
Slowy - http://slowyapp.com/
Network Link Conditioner - https://developer.apple.com...
#2 create a clean browser environment
No extensions, privatewindow
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
HTML
ASSETS
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
HTML
ASSETS
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_...
Live coding OMG.
debugging a janky animation
uni.madhatted.com/emberconf/animation-initial/index.html
uni.madhatted.com/em...
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 }.obs...
1 var person = Ember.Object.extend({
2 name: 'rick'
3 logNameChange: function(){
4 console.log('observing name!');
5 }.obs...
1 var person = Ember.Object.extend({
2 name: 'rick'
3 somethingExpensive: function(){
4 // Something really heavy
5 }.obse...
1 var person = Ember.Object.extend({
2 name: 'rick'
3 somethingExpensive: function(){
4 // Something really heavy
5 }.obse...
1 var person = Ember.Object.extend({
2 name: 'rick'
3 scheduleSomethingExpensive: function(){
4 Ember.run.once(this, this....
#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/emb...
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
Snappy Means Happy: Performance in Ember Apps
Snappy Means Happy: Performance in Ember Apps
Snappy Means Happy: Performance in Ember Apps
Snappy Means Happy: Performance in Ember Apps
Nächste SlideShare
Wird geladen in …5
×

Snappy Means Happy: Performance in Ember Apps

13.391 Aufrufe

Veröffentlicht am

Ember is fast. Ember Core is working hard to make Ember even faster. So why does your app drag?

The performance of a single-page app is impacted by the performance characteristics of its foundational parts: Network, Rendering, and JavaScript. Ember provides tools to manage these cornerstones, but with the tradeoff of introducing its own characteristics.

In this talk, we will use the source of real, shipped Ember apps (and of Ember itself) to diagnose, understand, and improve slow interactions. The Chrome developer tools will help us understand slow code paths and identify opportunities for improvement. Along the way, we will learn how parts of Ember work at the macro and micro level and learn how the framework helps us manage performance challenges in a browser environment.

Veröffentlicht in: Technologie
  • Als Erste(r) kommentieren

Snappy Means Happy: Performance in Ember Apps

  1. 1. Snappy Means Happy Performance in Ember Apps
  2. 2. @mixonic httP://madhatted.com matt.beale@madhatted.com
  3. 3. 201 Created We build õ-age apps with Ember.js. We take teams from £ to • in no time flat.
  4. 4. http://bit.ly/emberconf-edge
  5. 5. JavaScript emberjs.jsbin.com/viron/1
  6. 6. Network Render Network Render emberjs.jsbin.com/viron/1
  7. 7. Web Applications Ember Applications
  8. 8. Web Performance Ember Performance
  9. 9. What to think about
  10. 10. How Fast is Fast?
  11. 11. 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/
  12. 12. 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
  13. 13. @mixonic sez 16ms 300ms 1 second + 10 seconds + 60 fps - Animation snappy waiting Lost a user
  14. 14. Opportunities for improvement
  15. 15. Network Render NetworkRender JavaScript uni.madhatted.com/emberconf/github-list/index.html
  16. 16. Animation, < 16ms Javascript renDer Snappy, less than 300 ms Javascript renDerNetwork One second and beyond JavascriptNetwork
  17. 17. Methodology
  18. 18. 1. Gather facts 2. Analyze & theorize 3. Change a single thing
  19. 19. 1. Gather facts 2. Analyze & theorize 3. Change a single thing 4. Confirm the theory
  20. 20. Real World
  21. 21. Speeding up emberjs.com on a phone ember.js website, why so slow? Analyze using a latency emulator & Chrome devtools “Network” tab
  22. 22. 1 second emberjs.com
  23. 23. 3.5 seconds emberjs.com
  24. 24. emberjs.com
  25. 25. 16 seconds! emberjs.com
  26. 26. Charles - http://www.charlesproxy.com/ Slowy - http://slowyapp.com/ Network Link Conditioner - https://developer.apple.com/... #1 reproduce mobile latency reliably
  27. 27. #2 create a clean browser environment No extensions, privatewindow support.google.com/chrome/answer/2364824?hl=en
  28. 28. #3 measurement & analysis developers.google.com/chrome-developer-tools/docs/network
  29. 29. #3 measurement & analysis
  30. 30. Blocking JavaScriptAssets in HTML Assets in CSS
  31. 31. Javascript CSS HTML ASSETS ASSETS assets HTML Head JS Network+Parse
  32. 32. ✦ Script at the bottom ✦ script async/defer ✦ explicitly load webfont in HTML (via script or link tag) #4 Solutions
  33. 33. Javascript CSS HTML ASSETS ASSETS assets HTML Head JS Network+Parse
  34. 34. #5 confirm the theory https://github.com/emberjs/website/pull/1337
  35. 35. www.amazon.com/High-Performance-Browser-Networking-performance/dp/1449344763
  36. 36. Making an animation smooth Janky animation Using continuous paint, composited borders, Chrome devtools “Timeline”
  37. 37. DOM TREe RENDER TREe LAYOUT PAINT composite #1 understanding browsers
  38. 38. #2 Measure Summary developers.google.com/chrome-developer-tools/docs/timeline
  39. 39. Better summary Frames #2 Measure developers.google.com/chrome-developer-tools/docs/timeline#frames_mode
  40. 40. JavaScript #2 Measure developers.google.com/chrome-developer-tools/docs/timeline#frames_mode
  41. 41. Paint #2 Measure developers.google.com/chrome-developer-tools/docs/timeline#frames_mode
  42. 42. Upload to GPU,
 Compositing #2 Measure developers.google.com/chrome-developer-tools/docs/timeline#frames_mode
  43. 43. Open a render console Special render options #2 Measure developers.google.com/chrome-developer-tools/docs/timeline#frames_mode
  44. 44. 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
  45. 45. Ember.js Property change notifications Chrome devtools “Timeline”, profiles
  46. 46. 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
  47. 47. 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
  48. 48. 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
  49. 49. 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.setProperties({ 9 name: 'bob', 10 age: 25, 11 shoeSize: 11 12 }); somethingExpensive, once observers are synchronous
  50. 50. 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
  51. 51. #2 profiler Processing Memory developers.google.com/chrome-developer-tools/docs/cpu-profiling
  52. 52. #2 profiler Modesdevelopers.google.com/chrome-developer-tools/docs/cpu-profiling#flame-chart
  53. 53. #2 profiler Runloop jQuery View Event developers.google.com/chrome-developer-tools/docs/cpu-profiling#flame-chart
  54. 54. #2 profiler developers.google.com/chrome-developer-tools/docs/cpu-profiling#flame-chart
  55. 55. #2 profiler Ember.run(function developers.google.com/chrome-developer-tools/docs/cpu-profiling#flame-chart
  56. 56. #2 profiler Queues developers.google.com/chrome-developer-tools/docs/cpu-profiling#flame-chart
  57. 57. 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
  58. 58. Web Performance Ember Performance
  59. 59. Javascript renDer Network
  60. 60. 1. Gather facts 2. Analyze & theorize 3. Change a single thing 4. Confirm the theory
  61. 61. Thanks! @mixonic httP://madhatted.com matt.beale@madhatted.com

×