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
600
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
Houtou.pm #1
papix
0
670
Eight Engineering Unit 紹介資料
sansan33
PRO
0
3.2k
TechBull Membersの開発進捗どうですか!?
rvirus0817
0
220
継続戦闘能⼒
sansantech
PRO
0
220
大手企業のAIツール導入の壁を越えて:サイバーエージェントのCursor活用戦略
gunta
19
5k
テストを実施する前に考えるべきテストの話 / Thinking About Testing Before You Test
nihonbuson
PRO
14
2k
GigaViewerにおけるMackerel APM導入の裏側
7474
0
460
会社員しながら本を書いてきた知見の共有
sat
PRO
3
690
[zh-TW] DevOpsDays Taipei 2025 -- Creating Awesome Change in SmartNews!(machine translation)
martin_lover
1
650
AIの電力問題を概観する
rmaruy
1
210
エンジニアが組織に馴染むために勉強会を主催してチームの壁を越える
ohmori_yusuke
2
120
Data Hubグループ 紹介資料
sansan33
PRO
0
1.7k
Featured
See All Featured
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
addyosmani
6
660
Writing Fast Ruby
sferik
628
61k
Building Applications with DynamoDB
mza
95
6.4k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
34
3k
The Art of Delivering Value - GDevCon NA Keynote
reverentgeek
14
1.5k
Site-Speed That Sticks
csswizardry
7
590
[RailsConf 2023] Rails as a piece of cake
palkan
55
5.6k
Faster Mobile Websites
deanohume
307
31k
Stop Working from a Prison Cell
hatefulcrawdad
269
20k
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
233
17k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
30
2.1k
Optimizing for Happiness
mojombo
378
70k
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