What are you in the mood for today?

Monday, 4 November 2013

Web Workers

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. ; )

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