Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Bringing The Sexy Back To WebWorkers


Published on

High Performance/Real-Time Web Applications can suffer from serial program execution, which can greatly decrease user experience, usability, application capabilities and overall performance. The new HTML5 WebWorker JavaScript API allows for multithreading in browser environment, which has removed serial code bottleneck that has always been an issue for processor intensive applications. Specifically at Game Theory Labs we were able to increase the performance of our application by 55% utilizing the techniques discussed. This meetup will show off the variations in the WebWorker API, associated overhead using the API, various WebWorker architectures (Inline vs External, Static vs Dynamic, Nested vs Shared) as well as implementing a 2-Tier Thread Management system that allows for generating child process outside of the main thread thereby increasing performance of handling/merging data between threads and the main application.

Published in: Technology
  • Be the first to comment

Bringing The Sexy Back To WebWorkers

  1. 1. Multithreading for High Performance Real Time Web Apps @CoreyClarkPhD @GameTheoryLabs
  2. 2. Who Am I? !   Professor of Game and Simulation Programming !   Founder of Game Theory Labs ! Nanoscale Semiconductor Growth Kinetics !   Flexible Embedded Electronics for ABL !   SWARM and C4ISR Embedded Systems !   Building HTML5 Web Apps Utilizing: !   Cloud Cluster Computing !   Game Technology !   Artificial Intelligence Modeling, Learning and Optimization What I Do:What I Did:
  3. 3. HTML5 JavaScript APIs WebGL WebSockets Gamepad API WebRTC WebAudio WebVideo GetUserMediaFullscreen The Sexy Ones….
  4. 4. And Then There Is WebWorkers Powerful…… But not Sexy
  5. 5. What I Want To Do Today Bring the Sexy Back to WebWorkers
  6. 6. What Is A WebWorker And What Can I Use It For… !   Isolated Thread !   Parallel Execution !   JSON Message Based Communication !   No Shared Memory* !   Asset Loading !   Computationally Intensive Processes !   Increase Overall App Performance via Parallel Processing !   Keeping UI Responsive !   Take advantage of multi-core processors *Shared Objects discussed Later
  7. 7. What are the Limitations? !   No Access: !   DOM !   Window !   Document !   Parent !   Main App Memory/Objects !   You Do Have Access To: !   XHR !   Navigator, Location ! setTimeout/setInterval !   App Cache !   Import Script
  8. 8. But First: A Simple Demo
  9. 9. Lets Talk Performance !   Creating a First WebWorker !   Create a Second WebWorker (same js file) !   Sending Small/Normal Sized Message !   Sending Large (100K Array Objects) Messages Dependent on JS File Seen >100ms ~ < 1ms ~ < 1ms ~10ms
  10. 10. WebWorker Variations !   Inline !   Dynamically created code file using BlobBuilder !   External !   Standard WebWorker, using a separate JavaScript File !   Nested ! WebWorker Inception…. A worker within a worker !   Shared !   Worker that allows for communication between other windows and iframes
  11. 11. Show Me The API ! wrk = new Worker(thread.js); ! wrk.postMessage(jsonObject); ! self.postMessage(jsonObject); !   Callbacks !   Message !   Error
  12. 12. Show Me The API ! sw = new SharedWorker(thread.js, [“Worker Name”]); ! sw.port.start() ! sw.port.postMessaget(jsonObject) ! port.postMessage(jsonObject); !   Callbacks !   connect – (gets the port) e.port[0] ! port.onmessage ! port.onerror
  13. 13. Browser Support ! WebWorkers !   Chrome, Safari, FireFox, IE10, Opera ! iOS, FF Mobile, Blackberry !   Shared Workers !   Chrome, Safari, iOS, BlackBerry, !   Nested ! FireFox
  14. 14. Is One Worker Enough? Multi Tier Thread Architecture Worker Nested Worker Nested Worker Nested Worker Window iframe
  15. 15. Building a 3D Game using HTML5 ! WebWorker !   Physics !   Networking !   AI !   Main App !   User Input ! WebGL* *At some point may be possible to place in WebWorker So With All These Threads…. Where do you sync the memory?
  16. 16. Lets Step Up Our Design Thread Thread Thread / iframe Thread / iframe … Thread Thread Pool Thread Manager Shared Memory
  17. 17. Omega Resistance v 0.1 !   Shared Workers (Chrome) !   Physics !   Networking ! Node.js server !   Shared Memory !   Multithreaded: !   100% > 35 FPS !   Single Threaded !   55% < 30FPS
  18. 18. Show Me The Numbers!
  19. 19. Can I Make It More Complicated? YES! Shared Objects Main Application Web Worker JavaScript Object
  20. 20. Sample JavaScript Game Engine Main App GUI/HUD WebGL Thread Manager Entity Data Entity Data Thread Controller Physics Thread AI Thread Network Thread* *If possible
  21. 21. Asset Loading When Apps Give Me…. I Get a WebWorker!
  22. 22. Omega Resistance 0v2 ! WebGL !   Gamepad API !   3D Rigid Body Physics !   AI Autonomous Movement ! WebWorkers
  23. 23.
  24. 24. Lessons Learned… The Hard Way !   Develop a way to properly identify them on Connection, or Load SharedWorker Threads Serially !   Initialize WebWorkers at Startup !   Debugging used to really suck, but now it sucks normal !   Minimize the number of messages !   Careful with automated generated messages in nested/shared worker architecture !   Developed in single thread (With MT in mind), then transition to multithread, IMHO !   Careful with recursive JavaScript Entities that you want to pass to WebWorker
  25. 25. Our Next Step JaHOVA OS GEn3CIS
  26. 26. Questions? Twitter/Facebook: @CoreyClarkPhD @GameTheoryLabs Blog: Dev Wiki: Git: