Scaling Performance of Large Applications, Even On Mobile Devices

Building a large JavaScript application that performs well on the desktop is hard. Building a large JavaScript application that performs well on mobile devices initially might seem impossible. However it can be done! This talk will focus on techniques that we have discovered and developed in the last year while building a large tablet application, and optimizing it's performance across a spectrum of mobile browsers. Topics will include reducing initial load time, dealing with large quantities of data, minimizing trips to the DOM, and dealing with low powered devices.

Transcript

1. Gregory Moeck Scaling Performance of Large Applications, Even On Mobile Devices @gregmoeck Monday, October 3, 11
2. Introduction Monday, October 3, 11
3. Quick Survey Monday, October 3, 11
4. Largest JS Application You’ve Built? Monday, October 3, 11
5. 1,000 LoC Monday, October 3, 11
6. 2,000 LoC Monday, October 3, 11
7. 5,000 LoC Monday, October 3, 11
8. 10,000 LoC Monday, October 3, 11
9. 25,000 LoC Monday, October 3, 11
10. 50,000 LoC Monday, October 3, 11
11. 100,000 LoC Monday, October 3, 11
12. Talk Structure Monday, October 3, 11
13. High Level Overview Monday, October 3, 11
14. No Real Code Monday, October 3, 11
15. Two Types Of Performance: Monday, October 3, 11
16. Initial Load Time Monday, October 3, 11
17. Application Responsiveness Monday, October 3, 11
18. Initial Load Time Monday, October 3, 11
19. Actual Load Time Monday, October 3, 11
20. Follow Best Practices Monday, October 3, 11
21. * Enable Compression * Remove Unused CSS * Combine JS & CSS * Minify JS & CSS * Optimize Images * Cache Resources Monday, October 3, 11
22. That’s Likely Not Enough Monday, October 3, 11
23. Surprising Fact: Monday, October 3, 11
24. Parsing JS Is Really Slow On Mobile Monday, October 3, 11
25. 1KB ~ 1ms 1MB ~ 1s Monday, October 3, 11
26. How Do I Get This Down? Monday, October 3, 11
27. 1. Remove Code Your Not Using Monday, October 3, 11
28. Example: SproutCore Blacklist Monday, October 3, 11
29. 2. Defer Loading Code Till It’s Needed Monday, October 3, 11
30. Break Your Application Into Modules Monday, October 3, 11
31. You Can Prefetch The Packages Monday, October 3, 11
32. Create An Abstraction To Do This For You Monday, October 3, 11
33. Example: Statechart In SproutCore Monday, October 3, 11
34. Perceived Load Time Monday, October 3, 11
35. Users Don’t Care About Actual Load Time Monday, October 3, 11
36. They Care If It “Seems Slow” Monday, October 3, 11
37. How Do I Avoid That “Feeling”? Monday, October 3, 11
38. 1. Have A Very Simple Initial Page Monday, October 3, 11
39. Once The Page Is Totally Loaded, Start The App Monday, October 3, 11
40. Sometimes You Can Make Your Load Page Look Like The App Monday, October 3, 11
41. Sometimes It’s Better Not To Monday, October 3, 11
42. 2. Put Some Animation While Loading Monday, October 3, 11
43. Caution: Monday, October 3, 11
44. Remember The Browser Is Single Threaded Monday, October 3, 11
45. How Do I Know If My App “Feels Slow”? Monday, October 3, 11
46. Put It In Front Of Non Developers Monday, October 3, 11
47. Responsiveness Monday, October 3, 11
48. Actual Responsiveness Monday, October 3, 11
49. Optimize Your Algorithms Monday, October 3, 11
50. * Faster Algorithms * Loops Instead Of Closures * Memoization * Queueing * Optimize Images Monday, October 3, 11
51. Two Places Most Apps Are Slow Monday, October 3, 11
52. DOM & AJAX Monday, October 3, 11
53. Server Browser Your Application Monday, October 3, 11
54. Server Browser Your Application AJAX DOM Monday, October 3, 11
55. Speeding Up AJAX Monday, October 3, 11
56. Key Ideas: Minimize Calls & Payload Monday, October 3, 11
57. 1. Ask Only For The Information You Need Monday, October 3, 11
58. Example: Search For Users Monday, October 3, 11
59. 2. Store Items Locally To Not Repeat Calls Monday, October 3, 11
60. 3. Don’t Talk To Multiple APIs For A Single Request Monday, October 3, 11
61. Talk To A Middle Tier Monday, October 3, 11
62. Speeding Up DOM Monday, October 3, 11
63. Key Idea: Minimize / Simplify Redrawing Monday, October 3, 11
64. 1. Minimize Elements In The DOM Monday, October 3, 11
65. Incremental Rendering Monday, October 3, 11
66. Some Name A some details about the user profile Some Name A some details about the user profile Some Name A some details about the user profile Some Name A some details about the user profile Some Name A some details about the user profile Some Name A some details about the user profile Some Name A some details about the user profile Some Name A some details about the user profile Some Name A some details about the user profile Some Name A some details about the user profile Some Name A some details about the user profile Some Name A some details about the user profile Some Name A some details about the user profile Some Name A some details about the user profile Some Name A some details about the user profile Some Name A some details about the user profile Some Name A some details about the user profile Some Name A some details about the user profile Some Name A some details about the user profile Some Name A some details about the user profile Some Name A some details about the user profile Some Name A some details about the user profile Some Name A some details about the user profile Some Name A some details about the user profile Some Name A some details Some Name A some details Some Name A some details Some Name A some details Some Name A some details Some Name A some details A some details about the user profile A some details about the user profile A some details about the user profile A some details about the user profile A some details about the user profile A some details about the user profile Monday, October 3, 11
67. Some Name A some details about the user profile Some Name A some details about the user profile Some Name A some details about the user profile Some Name A some details about the user profile Some Name A some details about the user profile Some Name A some details about the user profile Some Name A some details about the user profile Some Name A some details about the user profile Some Name A some details about the user profile Some Name A some details about the user profile Some Name A some details about the user profile Some Name A some details about the user profile Some Name A some details about the user profile Some Name A some details about the user profile Some Name A some details about the user profile Some Name A some details about the user profile Some Name A some details about the user profile Some Name A some details about the user profile Some Name A some details about the user profile Some Name A some details about the user profile Some Name A some details about the user profile Some Name A some details about the user profile Some Name A some details about the user profile Some Name A some details about the user profile Some Name A some details Some Name A some details Some Name A some details Some Name A some details Some Name A some details Some Name A some details A some details about the user profile A some details about the user profile A some details about the user profile A some details about the user profile A some details about the user profile A some details about the user profile Visible Window Monday, October 3, 11
68. Some Name A some details about the user profile Some Name A some details about the user profile Some Name A some details about the user profile Some Name A some details about the user profile Some Name A some details about the user profile Some Name A some details about the user profile Some Name A some details about the user profile Some Name A some details about the user profile Some Name A some details about the user profile Some Name A some details about the user profile Some Name A some details about the user profile Some Name A some details about the user profile Some Name A some details about the user profile Some Name A some details about the user profile Some Name A some details about the user profile Some Name A some details about the user profile Some Name A some details about the user profile Some Name A some details about the user profile Some Name A some details about the user profile Some Name A some details about the user profile Some Name A some details about the user profile Some Name A some details about the user profile Some Name A some details about the user profile Some Name A some details about the user profile Some Name A some details Some Name A some details Some Name A some details Some Name A some details Some Name A some details Some Name A some details A some details about the user profile A some details about the user profile A some details about the user profile A some details about the user profile A some details about the user profile A some details about the user profile Item Size Monday, October 3, 11
69. Just A Matter Of Math Monday, October 3, 11
70. 2. Minimize DOM Updates Monday, October 3, 11
71. Display Some List Pending Items Pending Todo P1 30 Complete All Pending Todo Pending Todo Pending Todo Pending Todo Pending Todo Pending Todo Pending Todo Pending Todo Pending Todo Pending Todo Pending Todo Pending Todo Pending Todo Pending Todo Pending Todo Monday, October 3, 11
72. Display Some List Pending Items Pending Todo P1 30 Complete All Pending Todo Pending Todo Pending Todo Pending Todo Pending Todo Pending Todo Pending Todo Pending Todo Pending Todo Pending Todo Pending Todo Pending Todo Pending Todo Pending Todo Pending Todo Monday, October 3, 11
73. Display Some List Pending Items Pending Todo P1 30 Complete All Pending Todo Pending Todo Pending Todo Pending Todo Pending Todo Pending Todo Pending Todo Pending Todo Pending Todo Pending Todo Pending Todo Pending Todo Pending Todo Pending Todo Pending Todo Monday, October 3, 11
74. Display Some List Pending Items Pending Todo P1 29 Complete All Pending Todo Pending Todo Pending Todo Pending Todo Pending Todo Pending Todo Pending Todo Pending Todo Pending Todo Pending Todo Pending Todo Pending Todo Pending Todo Pending Todo Pending Todo Monday, October 3, 11
75. Display Some List Pending Items Pending Todo P1 28 Complete All Pending Todo Pending Todo Pending Todo Pending Todo Pending Todo Pending Todo Pending Todo Pending Todo Pending Todo Pending Todo Pending Todo Pending Todo Pending Todo Pending Todo Pending Todo Monday, October 3, 11
76. Display Some List Pending Items Pending Todo P1 27 Complete All Pending Todo Pending Todo Pending Todo Pending Todo Pending Todo Pending Todo Pending Todo Pending Todo Pending Todo Pending Todo Pending Todo Pending Todo Pending Todo Pending Todo Pending Todo Monday, October 3, 11
77. ... Monday, October 3, 11
78. Display Some List Pending Items Pending Todo P1 0 Complete All Pending Todo Pending Todo Pending Todo Pending Todo Pending Todo Pending Todo Pending Todo Pending Todo Pending Todo Pending Todo Pending Todo Pending Todo Pending Todo Pending Todo Pending Todo Monday, October 3, 11
79. Stabilize Application State First Monday, October 3, 11
80. Server Browser Your Application AJAX DOM Monday, October 3, 11
81. Then Update The DOM Monday, October 3, 11
82. Or Buffer Changes Monday, October 3, 11
83. Perceived Responsiveness Monday, October 3, 11
84. 1. Put Up A UI Before Long Processes Monday, October 3, 11
85. 2. Give The User An Indication That Event Was Received Monday, October 3, 11
86. How Do I Know If My App “Feels Slow”? Monday, October 3, 11
87. Put It In Front Of Non Developers Monday, October 3, 11
88. @gregmoeck gmoeck@gmail.com Questions? Monday, October 3, 11