Web Workers

JavaScript ain't single threaded anymore

what's a web worker?

“This specification defines
an API for running scripts in the background  
 independently of any user interface scripts.”  

  “This allows for long-running scripts  
 that are not interrupted by scripts  
 that respond to clicks or other user interactions,  
 and allows long tasks to be executed without yielding  
 to keep the page responsive.

- W3C Specification  

Some more facts

  • Workers are HTML5
  • Uses MessgePort (postMessage) for communication
  • Browser support down to IE10 (single threaded polyfill available for <IE10)
  • Using real browser processes and are using all cores!
  • Workers can span sub-workers


example of web worker usage

 Blocking the windows single thread 


 Using a Web Worker 



 Limited access to features 

navigator object

location object (read-only)


setTimeout() and co.

Application Cache

Importing external scripts using importScripts()

Spawning other Web Workers

 DON'T have access to 

DOM (it's not thread-safe)

window object

document object

parent object

Shared worker

  • Has a daemon nature and accepts connections
  • Multiple windows can connect to the same worker
  • Not supported by IE at all

Shared Worker master

var worker = new SharedWorker('jsworker.js');

worker.port.addEventListener('message', function(e) {

worker.port.postMessage('Hi Slave!');

Shared worker slave

self.addEventListener('connect', function (event) {
  var port = event.ports[0];
  port.addEventListener('message', function (e) {
    port.postMessage('Hi Master!');

  Multithreading example  

  WIFI Password Cracking in the browser :-)  


using parallel.js

  • High level access to multicore processing using web workers
  • Accepts functions to execute (will create Blob and fallback to eval.js)
  • Chainable with promise syntax
  • Helper for executing multi-threaded core operations (map, reduce etc.)

var slowSquare = function (n) { 
  var i = 0; 
  while (++i < n * n) {}
  return i; 
// Create a job
var p = new Parallel(100000);
// Spawn our slow function

Web Workers

By Gion Kunz

Web Workers

Small presentation about HTML5 web workers

  • 2,304