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
190
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
740
Other Decks in Programming
See All in Programming
生成AI時代のコンポーネントライブラリの作り方
touyou
1
290
商品比較サービス「マイベスト」における パーソナライズレコメンドの第一歩
ucchiii43
0
190
テスト駆動Kaggle
isax1015
1
830
Claude Code + Container Use と Cursor で作る ローカル並列開発環境のススメ / ccc local dev
kaelaela
12
7.2k
CDK引数設計道場100本ノック
badmintoncryer
2
510
React は次の10年を生き残れるか:3つのトレンドから考える
oukayuka
36
13k
レベル1の開発生産性向上に取り組む − 日々の作業の効率化・自動化を通じた改善活動
kesoji
1
320
AI時代の『改訂新版 良いコード/悪いコードで学ぶ設計入門』 / ai-good-code-bad-code
minodriven
24
9.9k
Rails Frontend Evolution: It Was a Setup All Along
skryukov
0
290
Claude Code派?Gemini CLI派? みんなで比較LT会!_20250716
junholee
1
640
What's new in AppKit on macOS 26
1024jp
0
160
20250704_教育事業におけるアジャイルなデータ基盤構築
hanon52_
5
1.2k
Featured
See All Featured
Intergalactic Javascript Robots from Outer Space
tanoku
271
27k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
194
16k
[RailsConf 2023] Rails as a piece of cake
palkan
55
5.7k
Designing for Performance
lara
610
69k
Fashionably flexible responsive web design (full day workshop)
malarkey
407
66k
Producing Creativity
orderedlist
PRO
346
40k
YesSQL, Process and Tooling at Scale
rocio
173
14k
Dealing with People You Can't Stand - Big Design 2015
cassininazir
367
26k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
108
19k
Art, The Web, and Tiny UX
lynnandtonic
300
21k
Building Applications with DynamoDB
mza
95
6.5k
XXLCSS - How to scale CSS and keep your sanity
sugarenia
248
1.3M
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