Snappy Means Happy: Performance in Ember Apps

11,382 views
11,156 views

Published on

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.

Published in: Technology
0 Comments
12 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
11,382
On SlideShare
0
From Embeds
0
Number of Embeds
12
Actions
Shares
0
Downloads
41
Comments
0
Likes
12
Embeds 0
No embeds

No notes for slide

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

×