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

TDCSF14: Developing fast and efficient Tizen HT...

TDCSF14: Developing fast and efficient Tizen HTML5 mobile applications: Lessons Learned

Aki Saarinen

June 03, 2014
Tweet

More Decks by Aki Saarinen

Other Decks in Programming

Transcript

  1. ‹#› TizenDev • Automated deploying of app • Automated start-up

    timing • Automated FPS measurements • http://github.com/reaktor/tizendev
  2. ‹#› TizenDev: start-up time runs:          30

      mean:  1708ms   std:        63ms
  3. ‹#› TizenDev: framerate samples:        100   mean:

           58  FPS   std:            4  FPS
  4. ‹#› ! container.find("li").each(function()  {      var  listItem  =  $(this);

         listItem.text(item.width());   });   ! forces reflow
  5. ‹#› container.appendTo($("body"));   ! container.find("li").each(function()  {      var  listItem

     =  $(this);      listItem.text(item.width());   });   ! container.detach();  
  6. ‹#› container.appendTo($("body"));   ! container.find("li").each(function()  {      var  listItem

     =  $(this);      listItem.text(item.width());   });   ! container.detach();  
  7. ‹#› • Do lazy-loading • Use minification • Avoid reflow

    • Careful with native APIs • Parallelize
  8. ‹#› setTimeout(function()  {      element.css(        

     “-­‐webkit-­‐transform”,          “translate3d(100,0,0)”      );   },  0);
  9. ‹#› • DOM is slow • Do pre-loading • Use

    CSS3 transitions • Use overflow scrolling
  10. ‹#› • Performance is important • Measure before optimizing •

    Minimize actions at start-up • Pay attention to FPS