SlideShare a Scribd company logo
1 of 66
Download to read offline
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 layer
4. Composite all layers into a final image
Performance Cheat Codes:
HARDWARE ACCELERATION
rules 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)
DOM
Canvas
WebGl
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!

More Related Content

What's hot

Animations on Fire - Making Web animations fast
Animations on Fire - Making Web animations fastAnimations on Fire - Making Web animations fast
Animations on Fire - Making Web animations fastbrianskold
 
Building JavaScript Apps for Force.com with EmberJS
Building JavaScript Apps for Force.com with EmberJSBuilding JavaScript Apps for Force.com with EmberJS
Building JavaScript Apps for Force.com with EmberJSSalesforce Developers
 
S&T Pixel imperfect 150716
S&T Pixel imperfect 150716S&T Pixel imperfect 150716
S&T Pixel imperfect 150716Dan Dineen
 
Responsive Design Lessons
Responsive Design LessonsResponsive Design Lessons
Responsive Design LessonsDaniel Naumann
 
OGDC2013_ Cross platform game development with html5_ Mr Hoang Dinh Quang
OGDC2013_ Cross platform game development with html5_ Mr Hoang Dinh QuangOGDC2013_ Cross platform game development with html5_ Mr Hoang Dinh Quang
OGDC2013_ Cross platform game development with html5_ Mr Hoang Dinh Quangogdc
 
How to write an application and not roll down to 1 fps
How to write an application and not roll down to 1 fpsHow to write an application and not roll down to 1 fps
How to write an application and not roll down to 1 fpsIntexSoft
 
CSS3 Animations & Transitions with PhoneGap
CSS3 Animations & Transitions with PhoneGapCSS3 Animations & Transitions with PhoneGap
CSS3 Animations & Transitions with PhoneGapMark A R Smith
 
Adm web 01 - html css - a-frame
Adm   web 01 - html  css - a-frameAdm   web 01 - html  css - a-frame
Adm web 01 - html css - a-frameMatthew_W00d
 
More native look and feel of mobile JS applications with HTML5 canvas
More native look and feel of mobile JS applications with HTML5 canvasMore native look and feel of mobile JS applications with HTML5 canvas
More native look and feel of mobile JS applications with HTML5 canvasDenis Radin
 
TechDays Switzerland 2009
TechDays Switzerland 2009TechDays Switzerland 2009
TechDays Switzerland 2009Laurent Bugnion
 
Themes that perform short: WordCamp Antwerp 2016
Themes that perform short: WordCamp Antwerp 2016Themes that perform short: WordCamp Antwerp 2016
Themes that perform short: WordCamp Antwerp 2016Octavio Andrés Cifuentes
 
Staying Dry in Rails using code generation
Staying Dry in Rails using code generationStaying Dry in Rails using code generation
Staying Dry in Rails using code generationjeroenvandijk
 
Tools For Creating Wow Experiences In Flex
Tools For Creating Wow Experiences In FlexTools For Creating Wow Experiences In Flex
Tools For Creating Wow Experiences In FlexPek Pongpaet
 
Degrafa Overview
Degrafa OverviewDegrafa Overview
Degrafa OverviewBill White
 

What's hot (17)

Animations on Fire - Making Web animations fast
Animations on Fire - Making Web animations fastAnimations on Fire - Making Web animations fast
Animations on Fire - Making Web animations fast
 
Building JavaScript Apps for Force.com with EmberJS
Building JavaScript Apps for Force.com with EmberJSBuilding JavaScript Apps for Force.com with EmberJS
Building JavaScript Apps for Force.com with EmberJS
 
Blazor - C# for the web
Blazor - C# for the webBlazor - C# for the web
Blazor - C# for the web
 
S&T Pixel imperfect 150716
S&T Pixel imperfect 150716S&T Pixel imperfect 150716
S&T Pixel imperfect 150716
 
CSS3 Animations
CSS3 AnimationsCSS3 Animations
CSS3 Animations
 
Autospoting - an automated EC2 spot market bidder
Autospoting - an automated EC2 spot market bidderAutospoting - an automated EC2 spot market bidder
Autospoting - an automated EC2 spot market bidder
 
Responsive Design Lessons
Responsive Design LessonsResponsive Design Lessons
Responsive Design Lessons
 
OGDC2013_ Cross platform game development with html5_ Mr Hoang Dinh Quang
OGDC2013_ Cross platform game development with html5_ Mr Hoang Dinh QuangOGDC2013_ Cross platform game development with html5_ Mr Hoang Dinh Quang
OGDC2013_ Cross platform game development with html5_ Mr Hoang Dinh Quang
 
How to write an application and not roll down to 1 fps
How to write an application and not roll down to 1 fpsHow to write an application and not roll down to 1 fps
How to write an application and not roll down to 1 fps
 
CSS3 Animations & Transitions with PhoneGap
CSS3 Animations & Transitions with PhoneGapCSS3 Animations & Transitions with PhoneGap
CSS3 Animations & Transitions with PhoneGap
 
Adm web 01 - html css - a-frame
Adm   web 01 - html  css - a-frameAdm   web 01 - html  css - a-frame
Adm web 01 - html css - a-frame
 
More native look and feel of mobile JS applications with HTML5 canvas
More native look and feel of mobile JS applications with HTML5 canvasMore native look and feel of mobile JS applications with HTML5 canvas
More native look and feel of mobile JS applications with HTML5 canvas
 
TechDays Switzerland 2009
TechDays Switzerland 2009TechDays Switzerland 2009
TechDays Switzerland 2009
 
Themes that perform short: WordCamp Antwerp 2016
Themes that perform short: WordCamp Antwerp 2016Themes that perform short: WordCamp Antwerp 2016
Themes that perform short: WordCamp Antwerp 2016
 
Staying Dry in Rails using code generation
Staying Dry in Rails using code generationStaying Dry in Rails using code generation
Staying Dry in Rails using code generation
 
Tools For Creating Wow Experiences In Flex
Tools For Creating Wow Experiences In FlexTools For Creating Wow Experiences In Flex
Tools For Creating Wow Experiences In Flex
 
Degrafa Overview
Degrafa OverviewDegrafa Overview
Degrafa Overview
 

Similar to Running HTML5 Mobile Web Games at 60fps

Hacking to be performant
Hacking to be performantHacking to be performant
Hacking to be performantApoorv Saxena
 
AAA 3D GRAPHICS ON THE WEB WITH REACTJS + BABYLONJS + UNITY3D by Denis Radin ...
AAA 3D GRAPHICS ON THE WEB WITH REACTJS + BABYLONJS + UNITY3D by Denis Radin ...AAA 3D GRAPHICS ON THE WEB WITH REACTJS + BABYLONJS + UNITY3D by Denis Radin ...
AAA 3D GRAPHICS ON THE WEB WITH REACTJS + BABYLONJS + UNITY3D by Denis Radin ...DevClub_lv
 
JS Fest 2019. Денис Радин. AAA 3D графика в Web с ReactJS, BabylonJS и Unity3D
JS Fest 2019. Денис Радин. AAA 3D графика в Web с ReactJS, BabylonJS и Unity3DJS Fest 2019. Денис Радин. AAA 3D графика в Web с ReactJS, BabylonJS и Unity3D
JS Fest 2019. Денис Радин. AAA 3D графика в Web с ReactJS, BabylonJS и Unity3DJSFestUA
 
Advanced #4 GPU & Animations
Advanced #4   GPU & AnimationsAdvanced #4   GPU & Animations
Advanced #4 GPU & AnimationsVitali Pekelis
 
Building a game engine with jQuery
Building a game engine with jQueryBuilding a game engine with jQuery
Building a game engine with jQueryPaul Bakaus
 
Korea linuxforum2014 html5game-sangseoklim
Korea linuxforum2014 html5game-sangseoklimKorea linuxforum2014 html5game-sangseoklim
Korea linuxforum2014 html5game-sangseoklimSang Seok Lim
 
Ogdc 2013 cross platform game development with html5
Ogdc 2013 cross platform game development with html5Ogdc 2013 cross platform game development with html5
Ogdc 2013 cross platform game development with html5Son Aris
 
Web Performance Madness - brightonSEO 2018
Web Performance Madness - brightonSEO 2018Web Performance Madness - brightonSEO 2018
Web Performance Madness - brightonSEO 2018Bastian Grimm
 
Chrome Dev Summit Summary 2013 part 1 - what’s hot ?
Chrome Dev Summit Summary 2013 part 1 - what’s hot ?Chrome Dev Summit Summary 2013 part 1 - what’s hot ?
Chrome Dev Summit Summary 2013 part 1 - what’s hot ?Sacha Leprêtre
 
The latest in site speed: advanced #webperf 2018
The latest in site speed: advanced #webperf 2018The latest in site speed: advanced #webperf 2018
The latest in site speed: advanced #webperf 2018Anton Shulke
 
Advanced Web Graphics with Canvas
Advanced Web Graphics with CanvasAdvanced Web Graphics with Canvas
Advanced Web Graphics with CanvasJason Harwig
 
[D2 campus seminar]웹브라우저 엔진
[D2 campus seminar]웹브라우저 엔진[D2 campus seminar]웹브라우저 엔진
[D2 campus seminar]웹브라우저 엔진NAVER D2
 
Performance as UX with Justin Howlett
Performance as UX with Justin HowlettPerformance as UX with Justin Howlett
Performance as UX with Justin HowlettFITC
 
Html5 Game Development with Canvas
Html5 Game Development with CanvasHtml5 Game Development with Canvas
Html5 Game Development with CanvasPham Huy Tung
 
Super speed around the globe - SearchLeeds 2018
Super speed around the globe - SearchLeeds 2018Super speed around the globe - SearchLeeds 2018
Super speed around the globe - SearchLeeds 2018Bastian Grimm
 
SearchLeeds 2018 - Bastian Grimm - Peak Ace - International site speed: Going...
SearchLeeds 2018 - Bastian Grimm - Peak Ace - International site speed: Going...SearchLeeds 2018 - Bastian Grimm - Peak Ace - International site speed: Going...
SearchLeeds 2018 - Bastian Grimm - Peak Ace - International site speed: Going...Branded3
 
Cutting edge of web technology
Cutting edge of web technologyCutting edge of web technology
Cutting edge of web technologyTsutomu Ogasawara
 

Similar to Running HTML5 Mobile Web Games at 60fps (20)

Hacking to be performant
Hacking to be performantHacking to be performant
Hacking to be performant
 
Html5 (games)
Html5 (games)Html5 (games)
Html5 (games)
 
Presentation on Fresco
Presentation on FrescoPresentation on Fresco
Presentation on Fresco
 
AAA 3D GRAPHICS ON THE WEB WITH REACTJS + BABYLONJS + UNITY3D by Denis Radin ...
AAA 3D GRAPHICS ON THE WEB WITH REACTJS + BABYLONJS + UNITY3D by Denis Radin ...AAA 3D GRAPHICS ON THE WEB WITH REACTJS + BABYLONJS + UNITY3D by Denis Radin ...
AAA 3D GRAPHICS ON THE WEB WITH REACTJS + BABYLONJS + UNITY3D by Denis Radin ...
 
JS Fest 2019. Денис Радин. AAA 3D графика в Web с ReactJS, BabylonJS и Unity3D
JS Fest 2019. Денис Радин. AAA 3D графика в Web с ReactJS, BabylonJS и Unity3DJS Fest 2019. Денис Радин. AAA 3D графика в Web с ReactJS, BabylonJS и Unity3D
JS Fest 2019. Денис Радин. AAA 3D графика в Web с ReactJS, BabylonJS и Unity3D
 
Advanced #4 GPU & Animations
Advanced #4   GPU & AnimationsAdvanced #4   GPU & Animations
Advanced #4 GPU & Animations
 
Building a game engine with jQuery
Building a game engine with jQueryBuilding a game engine with jQuery
Building a game engine with jQuery
 
Korea linuxforum2014 html5game-sangseoklim
Korea linuxforum2014 html5game-sangseoklimKorea linuxforum2014 html5game-sangseoklim
Korea linuxforum2014 html5game-sangseoklim
 
Ogdc 2013 cross platform game development with html5
Ogdc 2013 cross platform game development with html5Ogdc 2013 cross platform game development with html5
Ogdc 2013 cross platform game development with html5
 
Web Performance Madness - brightonSEO 2018
Web Performance Madness - brightonSEO 2018Web Performance Madness - brightonSEO 2018
Web Performance Madness - brightonSEO 2018
 
Chrome Dev Summit Summary 2013 part 1 - what’s hot ?
Chrome Dev Summit Summary 2013 part 1 - what’s hot ?Chrome Dev Summit Summary 2013 part 1 - what’s hot ?
Chrome Dev Summit Summary 2013 part 1 - what’s hot ?
 
The latest in site speed: advanced #webperf 2018
The latest in site speed: advanced #webperf 2018The latest in site speed: advanced #webperf 2018
The latest in site speed: advanced #webperf 2018
 
Advanced Web Graphics with Canvas
Advanced Web Graphics with CanvasAdvanced Web Graphics with Canvas
Advanced Web Graphics with Canvas
 
[D2 campus seminar]웹브라우저 엔진
[D2 campus seminar]웹브라우저 엔진[D2 campus seminar]웹브라우저 엔진
[D2 campus seminar]웹브라우저 엔진
 
Performance as UX with Justin Howlett
Performance as UX with Justin HowlettPerformance as UX with Justin Howlett
Performance as UX with Justin Howlett
 
#Webperf Choreography
#Webperf Choreography#Webperf Choreography
#Webperf Choreography
 
Html5 Game Development with Canvas
Html5 Game Development with CanvasHtml5 Game Development with Canvas
Html5 Game Development with Canvas
 
Super speed around the globe - SearchLeeds 2018
Super speed around the globe - SearchLeeds 2018Super speed around the globe - SearchLeeds 2018
Super speed around the globe - SearchLeeds 2018
 
SearchLeeds 2018 - Bastian Grimm - Peak Ace - International site speed: Going...
SearchLeeds 2018 - Bastian Grimm - Peak Ace - International site speed: Going...SearchLeeds 2018 - Bastian Grimm - Peak Ace - International site speed: Going...
SearchLeeds 2018 - Bastian Grimm - Peak Ace - International site speed: Going...
 
Cutting edge of web technology
Cutting edge of web technologyCutting edge of web technology
Cutting edge of web technology
 

Running HTML5 Mobile Web Games at 60fps