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