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
Top Related