Running HTML5 Mobile Web Games at 60fps

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!