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
620
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
AWSが好きすぎて、41歳でエンジニアになり、AAIを経由してAWSパートナー企業に入った話
yama3133
1
150
dbtとAIエージェントを組み合わせて見えたデータ調査の新しい形
10xinc
6
1.3k
GraphRAG グラフDBを使ったLLM生成(自作漫画DBを用いた具体例を用いて)
seaturt1e
1
160
serverless team topology
_kensh
3
240
From Natural Language to K8s Operations: The MCP Architecture and Practice of kubectl-ai
appleboy
0
310
ソースを読む時の思考プロセスの例-MkDocs
sat
PRO
1
320
20251029_Cursor Meetup Tokyo #02_MK_「あなたのAI、私のシェル」 - プロンプトインジェクションによるエージェントのハイジャック
mk0721
PRO
5
1.8k
様々なファイルシステム
sat
PRO
0
260
可観測性は開発環境から、開発環境にもオブザーバビリティ導入のススメ
layerx
PRO
4
1.7k
SRE × マネジメントレイヤーが挑戦した組織・会社のオブザーバビリティ改革 ― ビジネス価値と信頼性を両立するリアルな挑戦
coconala_engineer
0
290
20251024_TROCCO/COMETAアップデート紹介といくつかデモもやります!_#p_UG 東京:データ活用が進む組織の作り方
soysoysoyb
0
120
ViteとTypeScriptのProject Referencesで 大規模モノレポのUIカタログのリリースサイクルを高速化する
shuta13
3
220
Featured
See All Featured
10 Git Anti Patterns You Should be Aware of
lemiorhan
PRO
658
61k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
48
9.7k
Understanding Cognitive Biases in Performance Measurement
bluesmoon
31
2.7k
Fantastic passwords and where to find them - at NoRuKo
philnash
52
3.5k
Why You Should Never Use an ORM
jnunemaker
PRO
59
9.6k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
359
30k
Mobile First: as difficult as doing things right
swwweet
225
10k
Building a Scalable Design System with Sketch
lauravandoore
463
33k
How GitHub (no longer) Works
holman
315
140k
Building Flexible Design Systems
yeseniaperezcruz
329
39k
The Cult of Friendly URLs
andyhume
79
6.6k
Become a Pro
speakerdeck
PRO
29
5.6k
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