Keep calm and browse happy - Gaining speed on mobile browsers

Developers using web technologies for their mobile apps face challenges which are almost unknown in the desktop world, such as Memory limits, JavaScript execution time and render speed, all factors necessary for a smooth user experience, which are usually not in the minds of front end engineers. This talk shows techniques on how to keep your HTML5 app up to speed and performing high, and teaches how to apply the principles of progressive enhancement.

Transcript

1. KEEP CALM AND BROWSE HAPPY Topconf Tallinn - November 2013
2. Tere
3. @ddprrt
4. Netural
5. workingdraft.de
7. Lafers grill recipes The need precise control I need to put meat on fire
8. Weber-Kit
9. Controlled Environments
10. Controllable Environments
12. Uncontrollable Environments
20. UC Browser
21. UC Browser 400 million users 32% market-share in China
22. ... to be honest ... only few of them come with their own engine
23. Under the top-most used browsers on iOS and Android
24. Fragmentation
29. iOS screen fragmentation
30. Android screen fragmentation
31. Holy fragmentation, Batman This is friggin' scary
32. And that is just Android ...
33. Viewport is one thing... Features? Implementation quality? Memory? Resolution? Browser Speed? Connection speed?
34. What about things we trust?
35. > t r u e + t r u e 2
36. > 0 . 1 + 0 . 2 0 . 3 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 4
37. > 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 1 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0
38. > [ ] = = ! [ ] t r u e
39. > t y p e o f N a N n u m b e r
40. Programming went full retard
42. -webkit-text-stroke: 4px;
43. This is madness!
44. You can't control everything
45. You can't control anything
46. Parallax Scrolling?
48. moto.oakley.com 1. 85.4 MB page weight 2. 471 HTTP Requests 3. 2 minutes 45 seconds until loading screen replaced with content 4. 4 minutes 10 seconds to wait for onLoad event
49. There sure is a mobile version? ... oh yeah, there is...
50. 85.9 MB
51. Costs Roaming in Switzerland for EU clients is 1€ per MB
52. Costs vodafone UK charges 1£ per 25 MB
53. Assumptions Features: Scrolling Implementation quality: Tried, trusted and Robust Memory: A shitload Resolution: Of course Retina! Browser Speed: iPad-near JS execution time Connection speed: Harddrive
54. Features
57. overflow: scroll
58. -webkit-overflow-scrolling: touch
59. Feature detection Test for overflow-scrolling, otherwise use iScroll
60. var has3d = 'WebKitCSSMatrix' in window && 'm11' in new WebKitCSSMatrix()
61. The good: We did feature detects, and polyfilled in case
62. The bad: We assumed iScroll will fix all our problems iScroll assumed hardware acceleration is a good idea overall
63. The ugly: We broke IE10 on Windows Phone 8
65. When using skrollr on mobile you don't actually scroll. When detecting a mobile browser skrollr disables native scrolling and instead listens for touch events and moves the content
66. A classic $('a').on('click', function()) { window.location.href = $(this).attr('href'); }
68. Don't recreate browser features
69. Implementation quality
70. see Mobile Browser Games
71. Ludicrous Browser Speed
72. Truth is ... JavaScript takes long to execute
73. $('.item.' + filterCriteria).each(function() { $(this).hide(); });
74. $('.filterArea').addClass('.filterCritera'); .filterCritera .hasCritera { display: none; }
75. requestAnimationFrame
76. requestAnimationFrame requestAnimationFrame calls functions when the browser is going to (re)draw the layout bundle all of your layout changing calls into one function and execute them at the next animation frame
77. Results
78. There's a pretty good fallback using setTimeout As long as it's bundled, you can prevent or at least reduce layout trashing
79. v a r r a f = w i n d o w . r e q u e s t A n i m a t i o n F r a m e | | w i n d o w . w e b k i t R e q u e s t A n i m a t i o n F r a m e | | w i n d o w . m o z R e q u e s t A n i m a t i o n F r a m e | | w i n d o w . m s R e q u e s t A n i m a t i o n F r a m e | | f u n c t i o n ( c b ) { r e t u r n w i n d o w . s e t T i m e o u t ( c b , 1 0 0 0 / 6 0 ) ; } ;
80. Results With requestAnimationFrame: 94% faster With setTimeout fallback: 85% faster (depending on the case, of course)
81. https://github.com/wilsonpage/fast dom
82. CSS3?
83. CSS3 Calculation of certain features is expensive Consider gradients/borders being calculated
84. There is no rule of thumb!
85. IMAGE QUALITY / DOWNLOAD VS A LOT OF ELEMENTS
86. CSS3 Only apply CSS3 rules when @media triggers bigger screens
87. -webkit-something: something
88. Frameworks?
90. Don't use any framework?
91. Ask yourself if jQuery is necessary
92. Zepto vs jQuery
93. Zepto vs jQuery Zepto is more light-weight, mobile (Webkit!) focussed ... but also a lot less robust... jQuery 2.0 drops legacy issues ... and has an ability for custom builds ...
94. http://projects.jga.me/jquery- builder/
95. Or something completely different?
96. https://github.com/remy/min.js 0.6kb - covers basic features
97. There is no rule of thumb!
98. PARSING & DOWNLOAD TIME VS FEATURES AND COMPATIBILITY
99. Memory
100. Truth is ... You don't have that much memory on a mobile device
101. Memory Issues Anything that is too much for a mobile browser to handle will result in a silent crash This can be JavaScript execution, this can be a single line of CSS, this can be a DOM manipulation, this can be data transferred with AJAX
102. Single Page App
103. Single Page App New page means clean memory Really check if your app fits into a single page For instance: User account information might have nothing to do with the rest of the app
104. Local Storage
105. Local Storage Gives you 5 MB of extra memory for your app Use it to store anything that you don't need to access all the time Use it to persist data carried across your app LocalStorage is slow, but faster than browser cache
107. There is no rule of thumb
108. IT ALL DEPENDS ON YOUR DATA!
109. Resolution
111. SVG
114. SVG is slow?
115. https://github.com/svg/svgo
116. There is no rule of thumb
117. SVG PARSING AND DISPLAYING TIME VS DOWNLOAD TIME
118. Connection speed
119. Reduce everything!
120. What does not kill me makes me smaller
121. Check your data! { " i s A c t i v e " : " t r u e " , " i s V i s i b l e " : " f a l s e " , " i s T o p " : " f a l s e " } i f ( x . i s V i s i b l e ) { . . . }
122. Use "default" values { " i s A c t i v e " : " t r u e " } i f ( x . i s V i s i b l e ) { . . . }
123. Reduce Requests of initial data Combine all CSS into one file Combine all JS into one file ? Single Pager? Deliver CSS in HTML file
124. There is no rule of thumb
125. Progressive Enhancement
127. Progressive Enhancement Provide a solid (HTML) base, something you trust and know Enhance your presentation by applying new styles Enhance further by applying behaviour with JavaScript
128. Why Progressive Enhancement
129. Not only for the old things we know
130. But also for the uncertainty of the future!
131. Create the most amazing food... ... by choosing the right ingredients
132. THX @ddprrt • fettblog.eu • workingdraft.de