JavaScript MultiThreading with HTML5 Web Workers

David Rousset describes how you can write JavaScript to take advantage of the new dual- or quad-core processors in your HTML5 applications. You’ll be interested in this for several kinds of scenarios, such as:

• image processing
• big amount of data 
• background text analysis
• concurrent requests against a local database
• and more.

His article, Introduction to the HTML5 Web Workers: the JavaScript multithreading approach, shows step by step how you can implement HTML5 Web Workers with some cool demo and sample code.

• Before the workers…
• Web Workers or how to be executed out of the UI Thread
  • My 1st Web Worker
  • Posting messages using JSON
• Browsers support
• Non accessible elements from a worker
• Errors handling & debugging
  • The F12 development bar for a better debugging experience
  • An interesting solution to mimic console.log()
• Use cases and how to identify potential candidates
  • Web Workers for which scenarios?
  • How to identity hot spots in your code
    • Case 1: canvas animation with the Speed Reading demo
    • Case 2: Raytracers inside canvas
• Conclusion

Web Workers have just arrived in the IE10 PP2 (Platform Preview). This is also supported by Firefox (since 3.6), Safari (since 4.0), Chrome & Opera 11. However, this is not supported by the mobile versions of these browsers. If you’d like to have a more detailed support matrix, have a look here: https://caniuse.com/#search=worker

All the samples of this article are available in this ZIP file: https://david.blob.core.windows.net/html5/WebWorkersSamples.zip

 

Bruce D. KyleISV Architect Evangelist | Microsoft Corporation