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

Fast and Efficient Tizen HTML5 mobile apps (Tiz...

Aki Saarinen
November 11, 2013

Fast and Efficient Tizen HTML5 mobile apps (Tizen Developer Summit Korea 2013)

Aki Saarinen

November 11, 2013
Tweet

More Decks by Aki Saarinen

Other Decks in Technology

Transcript

  1. • WebKit Web Inspector • Tizendev: start-up • Tizendev: framerate

    Available tools 2 Start-up time 3 Run-time 1 Measure
  2. http://github.com/reaktor/tizendev Tizendev • Automated deploying of app • Automated start-up

    timing • Automated FPS measurements 2 Start-up time 3 Run-time 1 Measure
  3. tizendev: start-up time runs:          30 mean:

     1708ms std:        63ms 2 Start-up time 3 Run-time 1 Measure
  4. tizendev: framerate samples:        100 mean:    

       58  FPS std:            4  FPS 2 Start-up time 3 Run-time 1 Measure
  5. • WebKit Web Inspector • Tizendev: start-up • Tizendev: framerate

    Available tools 2 Start-up time 3 Run-time 1 Measure
  6. • Lazy-loading • Minification • Reflow • Native API calls

    • Parallelization 2 Start-up time 1 Measure 3 Run-time
  7. Monolithic app Large codebase, all loaded and parsed at start-up

    time 2 Start-up time 1 Measure 3 Run-time
  8. Modularized pieces to show other views on-demand Code to show

    first screen Lazy-loading 2 Start-up time 1 Measure 3 Run-time
  9. forces reflow container.find("li").each(function()  {    var  listItem  =  $(this);  

     listItem.text(item.width()); }); 2 Start-up time 1 Measure 3 Run-time
  10. container.detach(); container.appendTo($("body")); prevents reflow container.find("li").each(function()  {    var  listItem  =

     $(this);    listItem.text(item.width()); }); 2 Start-up time 1 Measure 3 Run-time
  11. Native APIs • Defer execution • Use LocalStorage • Only

    fetch needed data 2 Start-up time 1 Measure 3 Run-time
  12. • Do lazy-loading • Use minification • Avoid reflow •

    Careful with native APIs • Parallelize 2 Start-up time 1 Measure 3 Run-time
  13. setTimeout(function()  {    element.css(        “-­‐webkit-­‐transform”,    

       “translate3d(100,0,0)”    ); },  0); 1 Measure 3 Run-time 2 Start-up time
  14. • DOM is slow • Do pre-loading • Use CSS3

    transitions • Use overflow scrolling 1 Measure 3 Run-time 2 Start-up time
  15. Summary • Performance is important • Measure before optimizing •

    Minimize actions at start-up • Pay attention to FPS @akisaarinen