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
700
Other Decks in Programming
See All in Programming
Generative AI Use Cases JP (略称:GenU)奮闘記
hideg
0
150
色々なIaCツールを実際に触って比較してみる
iriikeita
0
270
生成 AI を活用した toitta 切片分類機能の裏側 / Inside toitta's AI-Based Factoid Clustering
pokutuna
0
570
Realtime API 入門
riofujimon
0
110
ピラミッド、アイスクリームコーン、SMURF: 自動テストの最適バランスを求めて / Pyramid Ice-Cream-Cone and SMURF
twada
PRO
9
1k
Googleのテストサイズを活用したテスト環境の構築
toms74209200
0
270
僕がつくった48個のWebサービス達
yusukebe
18
17k
Sidekiqで実現する 長時間非同期処理の中断と再開 / Pausing and Resuming Long-Running Asynchronous Jobs with Sidekiq
hypermkt
6
2.7k
【Kaigi on Rails 2024】YOUTRUST スポンサーLT
krpk1900
1
250
Pinia Colada が実現するスマートな非同期処理
naokihaba
2
160
Boost Performance and Developer Productivity with Jakarta EE 11
ivargrimstad
0
830
PagerDuty を軸にした On-Call 構築と運用課題の解決 / PagerDuty Japan Community Meetup 4
horimislime
1
110
Featured
See All Featured
How to Ace a Technical Interview
jacobian
275
23k
Teambox: Starting and Learning
jrom
132
8.7k
How GitHub (no longer) Works
holman
311
140k
Git: the NoSQL Database
bkeepers
PRO
425
64k
Speed Design
sergeychernyshev
24
570
A Philosophy of Restraint
colly
203
16k
The Pragmatic Product Professional
lauravandoore
31
6.3k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
29
2.2k
Fantastic passwords and where to find them - at NoRuKo
philnash
50
2.8k
A Modern Web Designer's Workflow
chriscoyier
692
190k
Building Your Own Lightsaber
phodgson
102
6k
GraphQLとの向き合い方2022年版
quramy
43
13k
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