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 HTML5 mobile applications: Lessons Learned
Search
Aki Saarinen
June 03, 2014
Programming
1
170
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.4k
Intro to 4k intros (Reaktor Dev Day 2013)
akisaarinen
0
340
Opinionated Scala (Reaktor Dev Day 2012)
akisaarinen
2
690
Other Decks in Programming
See All in Programming
二郎系ラーメンのコールで学ぶ AST 解析
memory1994
PRO
7
1.7k
0→1と1→10の狭間で Javaという技術選定を振り返る/Reflecting on the Decision to Choose Java Between Scaling from 0 to 1 and 1 to 10
jaguar_imo
2
380
SwiftUI Performance 不要なViewの再描画と更新を抑える
bigamitiongit
1
160
1BRC--Nerd Sniping the Java Community
gunnarmorling
0
340
コーンフレークから始める モデリング会話入門
ogurotakayuki
0
340
GitHub Copilotのススメ
marcy731
0
190
코틀린으로 멀티플랫폼 만들기
pangmoo
0
140
冗長なエラーログを削減し、スタックトレースを手に入れる / Reducing Verbose Error Logs and Obtaining Stack Traces
upamune
0
180
"config" ってなんだ? / What is "config"?
okashoi
0
240
Elm Form Validation
bkuhlmann
0
510
Azure OpenAI Serviceのプロンプトエンジニアリング入門
tomokusaba
3
620
Netty Chicago Java User Group 2024-04-17
sullis
0
170
Featured
See All Featured
5 minutes of I Can Smell Your CMS
philhawksworth
199
19k
From Idea to $5000 a Month in 5 Months
shpigford
377
45k
Gamification - CAS2011
davidbonilla
76
4.6k
Raft: Consensus for Rubyists
vanstee
132
6.3k
Embracing the Ebb and Flow
colly
79
4.1k
Side Projects
sachag
451
41k
The Art of Programming - Codeland 2020
erikaheidi
41
12k
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
321
20k
Automating Front-end Workflow
addyosmani
1355
200k
VelocityConf: Rendering Performance Case Studies
addyosmani
320
23k
Docker and Python
trallard
33
2.7k
Web development in the modern age
philhawksworth
202
10k
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