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

Slides for Tizen Developer Summit 2013 talk, http://tizendevelopersummitkorea2013.sched.org/event/2c49e9d2d0e98b4465af90fd01f07f83

1. FAST and EFFICIENT Tizen HTML5 mobile applications @akisaarinen
2. FAST & EFFICIENT @akisaarinen
3. is a mobile platform @akisaarinen
4. @akisaarinen
5. 1 Measure 2 Start-up time 3 Run-time performance @akisaarinen
6. 1 MEASURE 2 Start-up time 3 Run-time 1 Measure
7. Measure before optimizing 2 Start-up time 3 Run-time 1 Measure
8. • WebKit Web Inspector • Tizendev: start-up • Tizendev: framerate Available tools 2 Start-up time 3 Run-time 1 Measure
9. WebKit Web Inspector 2 Start-up time 3 Run-time 1 Measure
10. 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
11. tizendev: start-up time runs:          30 mean:  1708ms std:        63ms 2 Start-up time 3 Run-time 1 Measure
12. tizendev: framerate samples:        100 mean:        58  FPS std:            4  FPS 2 Start-up time 3 Run-time 1 Measure
13. • WebKit Web Inspector • Tizendev: start-up • Tizendev: framerate Available tools 2 Start-up time 3 Run-time 1 Measure
14. 2 START-UP TIME 2 Start-up time 1 Measure 3 Run-time
15. Less is more 2 Start-up time 1 Measure 3 Run-time
16. • Lazy-loading • Minification • Reflow • Native API calls • Parallelization 2 Start-up time 1 Measure 3 Run-time
17. Monolithic app Large codebase, all loaded and parsed at start-up time 2 Start-up time 1 Measure 3 Run-time
18. Large codebase, all loaded and parsed at start-up time Monolithic app 2 Start-up time 1 Measure 3 Run-time
19. Modularized pieces to show other views on-demand Code to show first screen Lazy-loading 2 Start-up time 1 Measure 3 Run-time
20. Minify: UglifyJS 2 Start-up time 1 Measure 3 Run-time
21. 1 kilobyte ~= 1 ms 2 Start-up time 1 Measure 3 Run-time
22. Avoid reflow Affects also run-time 2 Start-up time 1 Measure 3 Run-time
23. Example: Calling width() of an element 2 Start-up time 1 Measure 3 Run-time
24. container.find("li").each(function()  {    var  listItem  =  $(this);    listItem.text(item.width()); }); 2 Start-up time 1 Measure 3 Run-time
25. forces reflow container.find("li").each(function()  {    var  listItem  =  $(this);    listItem.text(item.width()); }); 2 Start-up time 1 Measure 3 Run-time
26. container.detach(); container.appendTo($("body")); container.find("li").each(function()  {    var  listItem  =  $(this);    listItem.text(item.width()); }); 2 Start-up time 1 Measure 3 Run-time
27. 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
28. 1000 elements (MacBook Pro) 2000 ms 60 ms 2 Start-up time 1 Measure 3 Run-time
29. Native APIs • Defer execution • Use LocalStorage • Only fetch needed data 2 Start-up time 1 Measure 3 Run-time
30. Parallelize • Resources • Service calls 2 Start-up time 1 Measure 3 Run-time
31. Parallelize 2 Start-up time 1 Measure 3 Run-time
32. Parallelize Could be parallelized? 2 Start-up time 1 Measure 3 Run-time
33. Parallelize ~150 ms 2 Start-up time 1 Measure 3 Run-time
34. • Do lazy-loading • Use minification • Avoid reflow • Careful with native APIs • Parallelize 2 Start-up time 1 Measure 3 Run-time
35. 3 RUN-TIME PERFORMANCE 1 Measure 3 Run-time 2 Start-up time
36. Instant response 60 FPS 1 Measure 3 Run-time 2 Start-up time
37. • DOM modifications • Pre-loading • CSS3 transitions • Scrolling 1 Measure 3 Run-time 2 Start-up time
38. DOM = SLOW 1 Measure 3 Run-time 2 Start-up time
39. display: none; + 5-10 FPS 1 Measure 3 Run-time 2 Start-up time
40. Pre-loading images/views 2 1 3 (pre-load) (pre-load) visible 1 Measure 3 Run-time 2 Start-up time
41. Accelerated CSS3 transitions 1 Measure 3 Run-time 2 Start-up time
42. jQuery.animate() CSS3 NO: YES: 1 Measure 3 Run-time 2 Start-up time
43. left: 0px -> 100px translate3d() NO: YES: 1 Measure 3 Run-time 2 Start-up time
44. background-color: ...; opacity: 0.2; NO: YES: 1 Measure 3 Run-time 2 Start-up time
45. -webkit-transform: translate3d(0,0,0); http://stackoverflow.com/questions/3461441/prevent-flicker-on-webkit-transition-of-webkit-transform Enable 3D acceleration 1 Measure 3 Run-time 2 Start-up time
46. Trigger animation in next render cycle 1 Measure 3 Run-time 2 Start-up time
47. setTimeout(function()  {    element.css(        “-­‐webkit-­‐transform”,        “translate3d(100,0,0)”    ); },  0); 1 Measure 3 Run-time 2 Start-up time
48. iScroll or other JavaScript library overflow: scroll; -webkit-overflow-scroll: touch; Momentum scrolling NO: NO: YES: 1 Measure 3 Run-time 2 Start-up time
49. • DOM is slow • Do pre-loading • Use CSS3 transitions • Use overflow scrolling 1 Measure 3 Run-time 2 Start-up time
50. 1 Measure 2 Start-up time 3 Run-time performance Summary @akisaarinen
51. Summary • Performance is important • Measure before optimizing • Minimize actions at start-up • Pay attention to FPS @akisaarinen
52. Thank you! @akisaarinen