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

1. FAST and EFFICIENT Tizen HTML5 mobile applications AKI SAARINEN, REAKTOR JAPAN @akisaarinen http://reaktor.co.jp/en/
2. ‹#› FAST
   &
   EFFICIENT
   
3. ‹#› Premature optimization is the root of all evil
   — Donald Knuth “
4. ‹#›
5. ‹#› 1 Measure!
   2 Start-up time
   3 Run-time performance
6. ‹#› 1 MEASURE!
7. ‹#› Measure twice
   cut once “ — my dad
8. ‹#› • WebKit Web Inspector • Tizendev: start-up time • Tizendev: framerate Available tools
9. ‹#› WebKit Web Inspector
10. ‹#› TizenDev • Automated deploying of app • Automated start-up timing • Automated FPS measurements • http://github.com/reaktor/tizendev
11. ‹#› TizenDev: start-up time runs:          30   mean:  1708ms   std:        63ms
12. ‹#› TizenDev: framerate samples:        100   mean:        58  FPS   std:            4  FPS
13. ‹#› 2 START-UP
14. ‹#› LESS IS MORE
15. ‹#› • Lazy-loading • Minification • Reflow • Native API calls • Parallelization
16. ‹#› Large codebase, all loaded and parsed at start-up time
17. ‹#› Large codebase, all loaded and parsed at start-up time
18. ‹#› Code for first screen Modularized code, show other views on-demand
19. ‹#› UglifyJS, Closure Compiler, .. 1 kilobyte ~= 1 ms
20. ‹#› Reflow
21. ‹#› Avoid reflow REALLY!
22. ‹#› Example: Calling width() of an element
23. ‹#› ! container.find("li").each(function()  {      var  listItem  =  $(this);      listItem.text(item.width());   });   ! forces reflow
24. ‹#› container.appendTo($("body"));   ! container.find("li").each(function()  {      var  listItem  =  $(this);      listItem.text(item.width());   });   ! container.detach();  
25. ‹#› container.appendTo($("body"));   ! container.find("li").each(function()  {      var  listItem  =  $(this);      listItem.text(item.width());   });   ! container.detach();  
26. ‹#› 1000 elements (MacBook Pro) ! 2000 ms 60 ms
27. ‹#› • Defer execution • Use local storage • Only fetch needed data Native APIs
28. ‹#› Parallelize
29. ‹#›
30. ‹#›
31. ‹#› • Do lazy-loading • Use minification • Avoid reflow • Careful with native APIs • Parallelize
32. ‹#› 3 RUN-TIME
33. ‹#› 60 FPS
34. ‹#› • DOM modifications • Pre-loading • CSS3 transitions • Scrolling
35. ‹#› DOM
    =
    SLOW
36. ‹#› display: none;
    ! + 5-10 FPS
37. ‹#› 2 1 3 (pre-load) (pre-load) visible
38. ‹#› Accelerated
    CSS3 transitions
39. ‹#› jQuery.animate()
    CSS3 NO: YES:
40. ‹#› left: 0px -> 100px
    translate3d() NO: YES:
41. ‹#› background-color: ...;
    opacity: 0.2; NO: YES:
42. ‹#› -webkit-transform: translate3d(0,0,0); http://stackoverflow.com/questions/3461441/prevent-flicker-on-webkit-transition-of-webkit-transform Enable 3D acceleration
43. ‹#› Trigger animation in next render cycle
44. ‹#› setTimeout(function()  {      element.css(          “-­‐webkit-­‐transform”,          “translate3d(100,0,0)”      );   },  0);
45. ‹#› iScroll or other JavaScript library
    overflow: scroll;
    -webkit-overflow-scroll: touch; Momentum scrolling NO: NO: YES:
46. ‹#› • DOM is slow • Do pre-loading • Use CSS3 transitions • Use overflow scrolling
47. ‹#› 1 Measure!
    2 Start-up time
    3 Run-time performance Re-cap!
48. ‹#› • Performance is important • Measure before optimizing • Minimize actions at start-up • Pay attention to FPS
49. ‹#› Thank you! @akisaarinen