• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
Bringing The Sexy Back To WebWorkers

Bringing The Sexy Back To WebWorkers



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

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.



Total Views
Views on SlideShare
Embed Views



1 Embed 2

http://www.linkedin.com 2



Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
Post Comment
Edit your comment

    Bringing The Sexy Back To WebWorkers Bringing The Sexy Back To WebWorkers Presentation Transcript

    • Multithreading for High Performance Real Time Web Apps @CoreyClarkPhD @GameTheoryLabs
    • 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:
    • HTML5 JavaScript APIs WebGL WebSockets Gamepad API WebRTC WebAudio WebVideo GetUserMediaFullscreen The Sexy Ones….
    • And Then There Is WebWorkers Powerful…… But not Sexy
    • What I Want To Do Today Bring the Sexy Back to WebWorkers
    • 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
    • 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
    • But First: A Simple Demo http://demo.jahovaos.com/JaHOVA/0v5_0/main.html?Console=threads2
    • 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
    • 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
    • Show Me The API ! wrk = new Worker(thread.js); ! wrk.postMessage(jsonObject); ! self.postMessage(jsonObject); !   Callbacks !   Message !   Error
    • 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
    • Browser Support ! WebWorkers !   Chrome, Safari, FireFox, IE10, Opera ! iOS, FF Mobile, Blackberry !   Shared Workers !   Chrome, Safari, iOS, BlackBerry, !   Nested ! FireFox
    • Is One Worker Enough? Multi Tier Thread Architecture Worker Nested Worker Nested Worker Nested Worker Window iframe
    • 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?
    • Lets Step Up Our Design Thread Thread Thread / iframe Thread / iframe … Thread Thread Pool Thread Manager Shared Memory
    • Omega Resistance v 0.1 !   Shared Workers (Chrome) !   Physics !   Networking ! Node.js server !   Shared Memory !   Multithreaded: !   100% > 35 FPS !   Single Threaded !   55% < 30FPS http://omega.gametheorylabs.com
    • Show Me The Numbers!
    • Can I Make It More Complicated? YES! Shared Objects Main Application Web Worker JavaScript Object
    • 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
    • Asset Loading When Apps Give Me…. I Get a WebWorker!
    • Omega Resistance 0v2 ! WebGL !   Gamepad API !   3D Rigid Body Physics !   AI Autonomous Movement ! WebWorkers
    • http://or.gametheorylabs.com
    • 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
    • Our Next Step JaHOVA OS GEn3CIS
    • Questions? Twitter/Facebook: @CoreyClarkPhD @GameTheoryLabs Blog: blog.gametheorylabs.com Dev Wiki: wiki.gametheorylabs.com Git: git.gametheorylabs.com