Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
TDCSF14: Developing fast and efficient Tizen HT...
Search
Aki Saarinen
June 03, 2014
Programming
1
180
TDCSF14: Developing fast and efficient Tizen HTML5 mobile applications: Lessons Learned
Aki Saarinen
June 03, 2014
Tweet
Share
More Decks by Aki Saarinen
See All by Aki Saarinen
Fast and Efficient Tizen HTML5 mobile apps (Tizen Developer Summit Korea 2013)
akisaarinen
1
1.5k
Intro to 4k intros (Reaktor Dev Day 2013)
akisaarinen
0
350
Opinionated Scala (Reaktor Dev Day 2012)
akisaarinen
2
710
Other Decks in Programming
See All in Programming
ペアーズでの、Langfuseを中心とした評価ドリブンなリリースサイクルのご紹介
fukubaka0825
2
300
iOSエンジニアから始める visionOS アプリ開発
nao_randd
3
120
chibiccをCILに移植した結果 (NGK2025S版)
kekyo
PRO
0
210
技術を根付かせる / How to make technology take root
kubode
1
240
Compose でデザインと実装の差異を減らすための取り組み
oidy
1
300
ISUCON14公式反省会LT: 社内ISUCONの話
astj
PRO
0
180
Spring gRPC について / About Spring gRPC
mackey0225
0
220
AIの力でお手軽Chrome拡張機能作り
taiseiue
0
170
Amazon Q Developer Proで効率化するAPI開発入門
seike460
PRO
0
110
How mixi2 Uses TiDB for SNS Scalability and Performance
kanmo
29
11k
[JAWS-UG横浜 #79] re:Invent 2024 の DB アップデートは Multi-Region!
maroon1st
1
140
Pulsar2 を雰囲気で使ってみよう
anoken
0
230
Featured
See All Featured
Testing 201, or: Great Expectations
jmmastey
41
7.2k
The Invisible Side of Design
smashingmag
299
50k
The Web Performance Landscape in 2024 [PerfNow 2024]
tammyeverts
4
400
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
280
13k
Code Review Best Practice
trishagee
66
17k
A Philosophy of Restraint
colly
203
16k
A Modern Web Designer's Workflow
chriscoyier
693
190k
Practical Orchestrator
shlominoach
186
10k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
33
2.1k
Principles of Awesome APIs and How to Build Them.
keavy
126
17k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
356
29k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
226
22k
Transcript
FAST and EFFICIENT Tizen HTML5 mobile applications AKI SAARINEN, REAKTOR
JAPAN @akisaarinen http://reaktor.co.jp/en/
‹#› FAST & EFFICIENT
‹#› Premature optimization is the root of all evil —
Donald Knuth “
‹#›
‹#› 1 Measure! 2 Start-up time 3 Run-time performance
‹#› 1 MEASURE!
‹#› Measure twice cut once “ — my dad
‹#› • WebKit Web Inspector • Tizendev: start-up time •
Tizendev: framerate Available tools
‹#› WebKit Web Inspector
‹#› TizenDev • Automated deploying of app • Automated start-up
timing • Automated FPS measurements • http://github.com/reaktor/tizendev
‹#› TizenDev: start-up time runs: 30
mean: 1708ms std: 63ms
‹#› TizenDev: framerate samples: 100 mean:
58 FPS std: 4 FPS
‹#› 2 START-UP
‹#› LESS IS MORE
‹#› • Lazy-loading • Minification • Reflow • Native API
calls • Parallelization
‹#› Large codebase, all loaded and parsed at start-up time
‹#› Large codebase, all loaded and parsed at start-up time
‹#› Code for first screen Modularized code, show other views
on-demand
‹#› UglifyJS, Closure Compiler, .. 1 kilobyte ~= 1 ms
‹#› Reflow
‹#› Avoid reflow REALLY!
‹#› Example: Calling width() of an element
‹#› ! container.find("li").each(function() { var listItem = $(this);
listItem.text(item.width()); }); ! forces reflow
‹#› container.appendTo($("body")); ! container.find("li").each(function() { var listItem
= $(this); listItem.text(item.width()); }); ! container.detach();
‹#› container.appendTo($("body")); ! container.find("li").each(function() { var listItem
= $(this); listItem.text(item.width()); }); ! container.detach();
‹#› 1000 elements (MacBook Pro) ! 2000 ms 60 ms
‹#› • Defer execution • Use local storage • Only
fetch needed data Native APIs
‹#› Parallelize
‹#›
‹#›
‹#› • Do lazy-loading • Use minification • Avoid reflow
• Careful with native APIs • Parallelize
‹#› 3 RUN-TIME
‹#› 60 FPS
‹#› • DOM modifications • Pre-loading • CSS3 transitions •
Scrolling
‹#› DOM = SLOW
‹#› display: none; ! + 5-10 FPS
‹#› 2 1 3 (pre-load) (pre-load) visible
‹#› Accelerated CSS3 transitions
‹#› jQuery.animate() CSS3 NO: YES:
‹#› left: 0px -> 100px translate3d() NO: YES:
‹#› background-color: ...; opacity: 0.2; NO: YES:
‹#› -webkit-transform: translate3d(0,0,0); http://stackoverflow.com/questions/3461441/prevent-flicker-on-webkit-transition-of-webkit-transform Enable 3D acceleration
‹#› Trigger animation in next render cycle
‹#› setTimeout(function() { element.css(
“-‐webkit-‐transform”, “translate3d(100,0,0)” ); }, 0);
‹#› iScroll or other JavaScript library overflow: scroll; -webkit-overflow-scroll:
touch; Momentum scrolling NO: NO: YES:
‹#› • DOM is slow • Do pre-loading • Use
CSS3 transitions • Use overflow scrolling
‹#› 1 Measure! 2 Start-up time 3 Run-time performance Re-cap!
‹#› • Performance is important • Measure before optimizing •
Minimize actions at start-up • Pay attention to FPS
‹#› Thank you! @akisaarinen
None