Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Keep calm and browse happy - Gaining speed on mobile browsers

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.

Stefan Baumgartner

November 07, 2013

More Decks by Stefan Baumgartner

Other Decks in Programming


  1. > 0 . 1 + 0 . 2 0 .

    3 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 4
  2. > 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
  3. > t y p e o f N a N

    n u m b e r
  4. 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
  5. 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
  6. The bad: We assumed iScroll will fix all our problems

    iScroll assumed hardware acceleration is a good idea overall
  7. 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
  8. 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
  9. There's a pretty good fallback using setTimeout As long as

    it's bundled, you can prevent or at least reduce layout trashing
  10. 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 ) ; } ;
  11. 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 ...
  12. 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
  13. 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
  14. 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
  15. SVG

  16. 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 ) { . . . }
  17. 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 ) { . . . }
  18. Reduce Requests of initial data Combine all CSS into one

    file Combine all JS into one file ? Single Pager? Deliver CSS in HTML file
  19. 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