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
- How you setup and use a web worker
- Inlineing your web worker into one file
- 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'); };
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()
andsetInterval()/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