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
可変性を制する設計: 構造と振る舞いから考える概念モデリングとその実装
a_suenami
10
1.6k
AI Ramen Fight
yusukebe
0
130
iOS開発スターターキットの作り方
akidon0000
0
240
新しいモバイルアプリ勉強会(仮)について
uetyo
1
250
画像コンペでのベースラインモデルの育て方
tattaka
3
1.3k
実践 Dev Containers × Claude Code
touyu
1
140
CEDEC 2025 『ゲームにおけるリアルタイム通信への QUIC導入事例の紹介』
segadevtech
3
760
QA x AIエコシステム段階構築作戦
osu
0
240
オホーツクでコミュニティを立ち上げた理由―地方出身プログラマの挑戦 / TechRAMEN 2025 Conference
lemonade_37
1
440
Flutterと Vibe Coding で個人開発!
hyshu
1
230
React 使いじゃなくても知っておきたい教養としての React
oukayuka
18
5.3k
大規模FlutterプロジェクトのCI実行時間を約8割削減した話
teamlab
PRO
0
450
Featured
See All Featured
Statistics for Hackers
jakevdp
799
220k
Principles of Awesome APIs and How to Build Them.
keavy
126
17k
Practical Orchestrator
shlominoach
190
11k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
283
13k
Understanding Cognitive Biases in Performance Measurement
bluesmoon
29
1.8k
Build The Right Thing And Hit Your Dates
maggiecrowley
37
2.8k
Side Projects
sachag
455
43k
Faster Mobile Websites
deanohume
308
31k
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
49
2.9k
For a Future-Friendly Web
brad_frost
179
9.9k
Embracing the Ebb and Flow
colly
86
4.8k
Documentation Writing (for coders)
carmenintech
73
5k
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