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