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
2週に1度のビッグバンリリースをデイリーリリース化するまでの苦悩 ~急成長するスタートアップのリアルな裏側~
kworkdev
PRO
8
5.9k
パブリッククラウドのプロダクトマネジメントとアーキテクト
tagomoris
3
220
やっちゃえ誤自宅Nutanix
yukiafronia
0
330
ドメイン駆動設計によるdodaダイレクトのリビルド実践 / Rebuild practice of doda direct with domain-driven design
techtekt
0
480
Oracle Cloud Infrastructure:2025年1月度サービス・アップデート
oracle4engineer
PRO
0
110
論文紹介 ”Long-Context LLMs Meet RAG: Overcoming Challenges for Long Inputs in RAG” @GDG Tokyo
shukob
0
250
Zenn のウラガワ ~エンジニアのアウトプットを支える環境で Google Cloud が採用されているワケ~ #burikaigi #burikaigi_h
kongmingstrap
2
200
FinJAWS_reinvent2024_recap_database
asahihidehiko
2
320
プロダクト価値を引き上げる、「課題の再定義」という習慣
moeka__c
0
190
RevOpsへ至る道 データ活用による事業革新への挑戦 / path-to-revops
pei0804
2
580
例外処理を理解して、設計段階からエラーを「見つけやすく」「起こりにくく」する
kajitack
7
1.3k
SREKaigi.pdf
_awache
2
3.3k
Featured
See All Featured
Side Projects
sachag
452
42k
Producing Creativity
orderedlist
PRO
343
39k
Reflections from 52 weeks, 52 projects
jeffersonlam
348
20k
The Myth of the Modular Monolith - Day 2 Keynote - Rails World 2024
eileencodes
20
2.4k
Java REST API Framework Comparison - PWX 2021
mraible
28
8.3k
How GitHub (no longer) Works
holman
312
140k
Raft: Consensus for Rubyists
vanstee
137
6.7k
Performance Is Good for Brains [We Love Speed 2024]
tammyeverts
7
590
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
160
15k
Fontdeck: Realign not Redesign
paulrobertlloyd
82
5.3k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
28
2.2k
ReactJS: Keep Simple. Everything can be a component!
pedronauck
666
120k
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