Monday 4 November 2013

Web Workers

HTML 5: Web Worker Basics

So when working with javascript you may have not realised that it is single threaded.... So Brian, what's the big deal?

 To explain a little; For those new to threads. You can simply think of a thread as the normal flow of execution you have been working with. You start, call a function, do some work and so on. Its all very step by step.
So threads are the same basic idea, only they can talk to each other allowing for more work to be done in parallel.

The program starts execution as normal and then start sub-tasks in threads that will go off and do there work, then can give back the results of there labor. This is how people leverage the strength of multi-core computers.
However it will take a little shift in how you think of problems. ; )

In this post Im going to look at 3 areas
  1. How you setup and use a web worker
  2. Inlineing your web worker into one file
  3. Web workers in older browsers that don't support them

1. How you setup and use a web worker

Lets get into the meat and bones of an example:

index.html
 
< !DOCTYPE html>
< html>
< head>  



< body>
  

source.js
//load the WebWorker file
var worker = new Worker('webworker1.js');

//create the function to handle the response
worker.onmessage = function(response) {
  document.getElementById("jsOutput").innerHTML = "Received: " + response.data;
}

// Start the worker.
worker.postMessage(''); // *Note: You must pass a string or Json object

webworker1.js
self.onmessage = function(event) {
   self.postMessage('Message from WebWorker');
};

"Received: Message from WebWorker"

That it. Very easy. Just put the code you what to run into another js file and off you go.


You should be aware that Due to their multi-threaded behavior, web workers only has access to a subset of JavaScript's features:
  • The navigator object
  • The location object (read-only)
  • XMLHttpRequest
  • setTimeout()/clearTimeout() and setInterval()/clearInterval()
  • The Application Cache
  • Importing external scripts using the importScripts() method
  • Spawng other web workers

Workers do NOT have access to:

  • The DOM (it's not thread-safe)
  • The window object
  • The document object
  • The parent object



2. Inlineing your web worker into one file


let's take the above and combin it all into one file

index.html

The first thing we need is to move webworker1.js inside a script element on our page but we must add an id to the element so we can reference it. I used the same name was I used when it was in a file "webworker1"
 
  

Now we want to swap out the include with the contents of the source.js
 

becomes
 
  


You should note the first two line.

var blob = new Blob([document.querySelector('#webworker1').textContent]);
This grates a reference to are code block that we want our web worker to work on.

var worker = new Worker(window.URL.createObjectURL(blob));
and here we create our web worker based on that code block.


3. Web workers in older browsers


For this you can using web-workers-fallback This library provides basic compatibility for the html5 web worker api in browsers that don't support it.
To use it, you only need include Worker.js, and everything should work out of the box.

*As usual you should read the Limitations section and test in a browser that doesn't support web workers ;)


For more information on web workers see the great Mozilla Developer Network resource: Using web workers
... continue reading!