Presented at FITC Toronto 2014 on April 27-29, 2014 More info at www.FITC.ca When developing in web languages like HTML5, CSS and JavaScript, you don’t control the majority of the code that is running your game, therefore you need to be able to profile and understand how the underlying code functions. Chrome Tools, JSPerf and Automated Testing are all critical tools that make HTML5 development possible. Some key technical points that Chris Shankland will dive into include: It is significantly faster to reassign functions rather than use inheritance The importance of profiling and the need to not assume anything How to create automated test cases How to optimize for garbage collection environment Technical details around CSS vs. Canvas The need to optimize for the environment your code will ultimately be running in – specifically the browser interpreter – and not your specific development environment. And some technical challenges that will be discussed: Performance Optimization Automated Testing Understanding native performance and memory in a UIWebView Using wrappers and building plug-ins for mobile app stores

1. Making
HTML5
Mobile
Games
Indis5nguishable
from
Na5ve
Apps
Presented by Christopher Shankland
Lead Software Developer
Big Viking Games

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

3. Performance
• Rethink everything

4. Performance
• Rethink everything
• Know your environment

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

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

7. Tools
• Chrome Dev Tools

8. Tools
• Native Profiling (mobile)

9. Tools
• jsperf.com

10. Tools
• V8 tools - Optimization profiling

11. Tools
• Safari remote debugging

12. Memory
• Garbage Collected (GC) environment
• Nearly everything creates garbage:
o [], {}, new , Object.keys, function() {},
Function.bind(...), Array.concat(...), String(s)

13. Memory
source: http://www-cs.canisius.edu/~hertzm/gcmalloc-oopsla-2005.pdf
• Mobile makes the situation exponentially worse

14. 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 ..."

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

16. Latency
• Critical rendering path

17. 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

18. Latency
• Critical rendering path
Network
HTML/CSS/JS

19. Network
• WebSockets – Vanilla / Binary / WebWorker

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

21. Graphics
• CSS or Canvas

22. Graphics
• CSS or Canvas
• Hardware Acceleration

23. Graphics
• CSS or Canvas
• Hardware Acceleration
• Optimizing Assets

24. Graphics
• CSS or Canvas
• Hardware Acceleration
• Optimizing Assets
• Going Native

25. 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

26. Thanks!
Questions?
Contact: cshankland@bigvikinggames.com
@cashankland