running html5 mobile web games at 60fps
TRANSCRIPT
Apoorv Saxena@apoorv_saxena
1998 2007 2009
What’s next?
Let the Data Speak!
Following are the stats of a Survey
Link: http://www.google.com/insights/consumersurveys/view?survey=xqnkc3hqtrucy
Smooth Navigation Jank Free Experience
Everything in 16ms
What is the need of the hour then?
HTML5 Mobile Games at 60fps
#perfmatters
Why is 60fps important?
At EdgeConf 2012, Facebook confirmed this when it
mentioned that in an A/B test, it slowed down scrolling from 60fps to 30fps, causing engagement to collapse.
16ms isn’t a lot of time
In a Nutshell..
Need for Speed
Evolution of the Web: Browser & Technologies
Optimizing Performance
● Performance is a feature. (Done)● Optimize Content Efficiency: Deliver your
content to users as quickly as possible. (Done)
● Once they're in, make interactions and rendering as smooth as possible.
Rendering at 60fps
Style/Layout PaintingJS Compositing
keep < 16ms!
1. Add CSS rules in style via JS.2. Recalculate style, maybe relayout.3. Paint the browser’s mental model to a layer4. Composite all layers into a final image
Performance Cheat Codes:
HARDWARE ACCELERATIONrules me
Force Hardware Accelerated Canvas(where supported)
Hack: Add 3D transform to the body via CSS
Do you know?
Canvas is not Hardware Accelerated in every browser
DOM Sprites
Build Games using DOM Elements
● Create Characters using Div, Spans and nested images
● Animate them using CSS and JS
● Cross Platform● Divs are hardware
accelerated on less capable hardware.
PROS● Doesn’t come anywhere
close in performance to Canvas (where hardware accelerated)
● Lacks in Complex Visualisations and Gameplay.
CONS
Sprite.js
(use any of the following for rendering)
DOMCanvasWebGl
Don’t update Canvas unnecessarily.
(Repaints are costly and must be performed at adequate intervals)
Hint: requestAnimationFrame to the rescue.
Use Sprite Sheets to avoid texture swaps
Bind Events only when required
and turn them off when not in use
Garbage Collection is a necessary Evil.
Tip: Create Objects beforehand.
Adjust your operations as per Framerate
ONE STEP BACK:HOW COMPILATION WORKS
C/C++ => LLVM => Emscripten => JavaScript
LLVM's optimizer uses type information to perform many useful optimizations.
Decades of work have gone into developing optimization passes for C/C++ compilers.
MICROBENCHMARKS
REALISTIC/LARGE BENCHMARKS
Note: Our eyes are much more attuned to variance than framerate.
A steady 30Hz looks better than 60Hz that misses a few frames a second.
Thank You!