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