Making  HTML5  Mobile  Games  Indis5nguishable  from  Na5ve  Apps  

Presented by Christopher Shankland Lead Software Developer

Big Viking Games

Outline

•  Performance – Raw computation •  Memory – A walk down GC Lane •  Latency – Avoiding watchdog •  Graphics – 80% of everything •  Network – Keeping the NSA busy

Performance

•  Rethink everything

Performance

•  Rethink everything •  Know your environment

Performance

•  Rethink everything •  Know your environment •  Use the “features” that exist

Performance

•  Rethink everything •  Know your environment •  Use the “features” that exist •  Look under the hood

Tools •  Chrome Dev Tools

Tools •  Native Profiling (mobile)

Tools •  jsperf.com

Tools •  V8 tools - Optimization profiling

Tools •  Safari remote debugging

Memory

•  Garbage Collected (GC) environment •  Nearly everything creates garbage:

o  [], {}, new , Object.keys, function() {}, Function.bind(...), Array.concat(...), String(s)

Memory

source: http://www-cs.canisius.edu/~hertzm/gcmalloc-oopsla-2005.pdf

•  Mobile makes the situation exponentially worse

Memory ECMAScript wiki: (http://wiki.ecmascript.org/doku.php?id=strawman:gc_semantics)

"the garbage collector MUST NOT collect any storage that then becomes

needed to continue correct execution of the program ... All objects which are not transitively strongly reachable from roots SHOULD eventually be collected, if needed to prevent the program execution from failing due to memory exhaustion" "... there is no spec of how much actual memory any individual object occupies ..."

Memory •  Create pools of things •  Adopt an "out parameter" convention •  asm.js style pre-allocation

Latency

•  Critical rendering path

Latency

•  Critical rendering path Network

3G 4G

Control plane (200-2500 ms) (50-100 ms)

DNS lookup 200 ms 100 ms

TCP Connection 200 ms 100 ms

TLS handshake (200-400 ms) (100-200 ms)

HTTP request 200 ms 100 ms

Latency

•  Critical rendering path Network HTML/CSS/JS

Network

•  WebSockets – Vanilla / Binary / WebWorker

Network

•  WebSockets – Vanilla / Binary / WebWorker •  Use XHR with proper content type

Graphics

•  CSS or Canvas

Graphics

•  CSS or Canvas •  Hardware Acceleration

Graphics

•  CSS or Canvas •  Hardware Acceleration •  Optimizing Assets

Graphics

•  CSS or Canvas •  Hardware Acceleration •  Optimizing Assets •  Going Native

References / Links

•  Ilya Grigorik (Google) Optimizing the Critical Rendering Path https://docs.google.com/presentation/d/1IRHyU7_crIiCjl0Gvue0WY3eY_eYvFQvSfwQouW9368/present

•  Mozilla Developer Network (MDN) https://developer.mozilla.org/en-US/docs/Web

•  Quantifying the Performance of Garbage Collection vs. Explicit Memory Management http://www-cs.canisius.edu/~hertzm/gcmalloc-oopsla-2005.pdf

•  James Mickens on JavaScript https://www.usenix.org/system/files/1403_02-08_mickens.pdf

•  HTML5 Rocks http://www.html5rocks.com/en/

•  Modern IE http://modern.ie/en-us

Thanks!

Questions?

Contact: cshankland@bigvikinggames.com @cashankland