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
590
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
Building Products in the LLM Era
ymatsuwitter
10
4.4k
『AWS Distinguished Engineerに学ぶ リトライの技術』 #ARC403/Marc Brooker on Try again: The tools and techniques behind resilient systems
quiver
0
130
明日からできる!技術的負債の返済を加速するための実践ガイド~『ホットペッパービューティー』の事例をもとに~
recruitengineers
PRO
3
100
「海外登壇」という 選択肢を与えるために 〜Gophers EX
logica0419
0
500
Postmanを使いこなす!2025年ぜひとも押さえておきたいPostmanの10の機能
nagix
2
120
Ask! NIKKEI RAG検索技術の深層
hotchpotch
13
2.8k
現場の種を事業の芽にする - エンジニア主導のイノベーションを事業戦略に装着する方法 -
kzkmaeda
2
1.5k
室長と気ままに学ぶマイクロソフトのビジネスアプリケーションとビジネスプロセス
ryoheig0405
0
320
現場で役立つAPIデザイン
nagix
29
10k
リアルタイム分析データベースで実現する SQLベースのオブザーバビリティ
mikimatsumoto
0
950
データ基盤の成長を加速させる:アイスタイルにおける挑戦と教訓
tsuda7
3
650
急成長する企業で作った、エンジニアが輝ける制度/ 20250214 Rinto Ikenoue
shift_evolve
2
880
Featured
See All Featured
Building Adaptive Systems
keathley
40
2.4k
The Art of Delivering Value - GDevCon NA Keynote
reverentgeek
10
1.3k
Bootstrapping a Software Product
garrettdimon
PRO
305
110k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
160
15k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
507
140k
VelocityConf: Rendering Performance Case Studies
addyosmani
328
24k
Principles of Awesome APIs and How to Build Them.
keavy
126
17k
Visualization
eitanlees
146
15k
[RailsConf 2023] Rails as a piece of cake
palkan
53
5.2k
BBQ
matthewcrist
86
9.5k
Large-scale JavaScript Application Architecture
addyosmani
510
110k
Bash Introduction
62gerente
610
210k
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