Your SlideShare is downloading. ×
Bringing The Sexy Back To WebWorkers
Bringing The Sexy Back To WebWorkers
Bringing The Sexy Back To WebWorkers
Bringing The Sexy Back To WebWorkers
Bringing The Sexy Back To WebWorkers
Bringing The Sexy Back To WebWorkers
Bringing The Sexy Back To WebWorkers
Bringing The Sexy Back To WebWorkers
Bringing The Sexy Back To WebWorkers
Bringing The Sexy Back To WebWorkers
Bringing The Sexy Back To WebWorkers
Bringing The Sexy Back To WebWorkers
Bringing The Sexy Back To WebWorkers
Bringing The Sexy Back To WebWorkers
Bringing The Sexy Back To WebWorkers
Bringing The Sexy Back To WebWorkers
Bringing The Sexy Back To WebWorkers
Bringing The Sexy Back To WebWorkers
Bringing The Sexy Back To WebWorkers
Bringing The Sexy Back To WebWorkers
Bringing The Sexy Back To WebWorkers
Bringing The Sexy Back To WebWorkers
Bringing The Sexy Back To WebWorkers
Bringing The Sexy Back To WebWorkers
Bringing The Sexy Back To WebWorkers
Bringing The Sexy Back To WebWorkers
Bringing The Sexy Back To WebWorkers
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Bringing The Sexy Back To WebWorkers

1,083

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 …

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
0 Comments
4 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
1,083
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
0
Comments
0
Likes
4
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

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

×