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