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
Optimizing JavaScript Runtime Performance for T...
Search
Stephen Woods
June 19, 2013
Technology
2
580
Optimizing JavaScript Runtime Performance for Touch - Velocity 2013
Stephen Woods
June 19, 2013
Tweet
Share
More Decks by Stephen Woods
See All by Stephen Woods
Creating Responsive HTML5 Touch Interfaces
ysaw
4
1.7k
Other Decks in Technology
See All in Technology
20241214_WACATE2024冬_テスト設計技法をチョット俯瞰してみよう
kzsuzuki
3
440
複雑性の高いオブジェクト編集に向き合う: プラガブルなReactフォーム設計
righttouch
PRO
0
110
AIのコンプラは何故しんどい?
shujisado
1
190
UI State設計とテスト方針
rmakiyama
2
450
生成AIのガバナンスの全体像と現実解
fnifni
1
180
Amazon SageMaker Unified Studio(Preview)、Lakehouse と Amazon S3 Tables
ishikawa_satoru
0
150
Jetpack Composeで始めるServer Cache State
ogaclejapan
2
170
KnowledgeBaseDocuments APIでベクトルインデックス管理を自動化する
iidaxs
1
260
小学3年生夏休みの自由研究「夏休みに Copilot で遊んでみた」
taichinakamura
0
150
なぜCodeceptJSを選んだか
goataka
0
160
Oracle Cloud Infrastructure:2024年12月度サービス・アップデート
oracle4engineer
PRO
0
170
どちらを使う?GitHub or Azure DevOps Ver. 24H2
kkamegawa
0
700
Featured
See All Featured
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
330
21k
XXLCSS - How to scale CSS and keep your sanity
sugarenia
247
1.3M
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
irinanazarova
5
440
Docker and Python
trallard
42
3.1k
What’s in a name? Adding method to the madness
productmarketing
PRO
22
3.2k
Reflections from 52 weeks, 52 projects
jeffersonlam
347
20k
Building Better People: How to give real-time feedback that sticks.
wjessup
365
19k
jQuery: Nuts, Bolts and Bling
dougneiner
61
7.5k
A designer walks into a library…
pauljervisheath
204
24k
4 Signs Your Business is Dying
shpigford
181
21k
How to train your dragon (web standard)
notwaldorf
88
5.7k
Making Projects Easy
brettharned
116
5.9k
Transcript
Optimizing JavaScript Runtime Performance for Touch Stephen Woods @ysaw
Native-Like Experience
Hardware Core OS Core Services Media Cocoa Touch
Hardware Core OS Core Services Media Cocoa Touch WebKit JavaScript
Runtime WebCore
The Mobile Web is Slow
What Happens at runtime? • Fetch, format and Display Data
• Handle UI Events • Move Pixels
Fetching Data
None
None
Caching: The cause of, and solution to, all of life's
problems
$.get('data.json', dataCallback);
$.get('/data.json', dataCallback); myDAL.getData('key', callback);
getData = function(key, callback) { if(cache[key]) return cache[key];
$.get('/data.json', function(data){ cache[key] = data; callback(data); } } myDAL.getData('key', callback);
window.localStorage['cache'] = JSON.stringify(cache);
TTL Writes Invalidate Cache
Eviction www.flickr.com/photos/75397401@N02/ 5mbs of localStorage Strings stored as UTF-16 Characters
Maximum Storage space: 2.5million Characters
Least Recently Used
None
None
None
None
None
None
Computing the size of the Cache. JSON.stringify(localStorage).length
Handling Events
Event handling is a conversation
If a gesture is in progress, the UI must be
in motion.
Moving Pixels
30fps = 33.3ms Per Frame 60fps = 16.6ms Per Frame
None
Write-Only DOM
getOffsetHeight : 74% slower than get className
If you can, cache the value, not the node
None
None
var offsetCache = {}; function getOffsetHeight(id) {
if(offsetCache[id]) { return offsetCache[node.id]; } else { offsetCache[id] = document.getElementById(id).offsetHeight } }
this.nodePositionMap[thisId] = { top: thisNode.getY(), height: thisNode.get('offsetHeight'),
defer:photoList[i].defer ? {img_url: 'bar'}: false };
None
background-‐image: 'foo.jpg'; background-‐size: 100%; transform: translate3d(10,10,1);
None
None
User feedback comes first
isSwiping = 1;
function handleXHR(resp) { if(isSwiping) { setTimeout(function(){
handleXHR(resp); },20); } processData(desp); }
None
• Load image ~ 300ms (async) • Find Faces ~
100ms (sync) • Compute Entropy Crop ~ 30ms (sync) • Smooth Animation (sync)
Run Animation in a Separate Thread
slide1.style.transition = transitionDuration +
's transform ease-‐out'; slide1.style.transform = computedEndFrame;
Run Slow Code in a Worker*
Run Slow Code in a Worker* *except on Android Browser
worker = new Worker('/smart-‐crop-‐worker.js');
UI Thread Handles Events and Orchestration
• Cache data where possible • Update the UI on
events, use transforms when possible • Multitask when you can, both with threads and yeilding
flickr.com/photos/39747297@N05/5230479916/ flickr.com/photos/pandameixiang/6784480227/ flickr.com/photos/ryfter/5196109310/ flickr.com/photos/howvin/4054392601/ flickr.com/photos/fdrlibrary/ @ysaw stephenwoods.net touch-interfaces.com flickr.jobs