So I wanted to learn about Web Workers, since they are (as far as I have come to understand) the only real way of running javascript in a separate thread. The following post is my explanation of the concept as I have percieved it at the time of learning.
Note: I wrote this post in the process of learning, meaning I’m not an expert. Don’t take my word as the truth. They’re just my interpretation of what others have said, and my own tests.
Web Workers
Web Workers allows running scripts “in the background”, in a separate thread from that of the user interface, allowing tasks to be performed without disturbing the user experience. Since javascript is a single threaded language, only able to simulate multithreading by using for example yield() or setInterval(), workers might be the only option for running javascript in separate threads. At least as far as I know.
Some things to know about web workers
- Workers have a high start-up performance cost
- Each worker instance consume a high amount of memory
- Workers are not intened to be used in large numbers at the same time
A worker should not be something you call frequently to perform small tasks, since the cost of calling the worker will exceed the benefit of running it in a separate thread.
So when do you use Web Workers then? Well, if you want to run something that has a high performance cost, without interfering with the user experience, web workers can be a viable option. Uses can include for example perform heavy calculations, or having a “listener” for notifications running in the background.
So how do you do it?
Simple example
First of all, I have a simple html page, with a span to post my results, and buttons to start and stop my worker.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
<html lang="en"> <head> [...] </head> <body> <input type="button" onclick="startWorking();" value="Start working!"> <input type="button" onclick="stopWorking();" value="Stop working!"> Results: <span id="resultSpan">...</span> <!-- load scripts at the bottom of your page --> <script src="javascript/foreman.js"></script> </body> </html> |
Next, I have a javascript file being loaded to the page. This is not my worker, but the script responsible for calling the worker. I call it foreman.js.
The first thing I want to do is to get my resultSpan element to present the results of the workers. I also create a variable for storing my worker object.
|
1 2 |
var result = document.getElementById("resultSpan"); var worker; |
Next I create a function for stopping the worker.
|
1 2 3 4 |
function stopWorking() { worker.terminate(); // Tell the worker to stop working. worker = undefined; // Fire the worker. } |
Not all browsers support workers, so a function to check for worker support might be a good idea.
|
1 2 3 4 5 6 7 8 9 |
function browserSupportsWebWorkers() { if(typeof(Worker) !== "undefined") { // Yes! Web worker support! return true; } else { // Sorry! No Web Worker support.. return false; } } |
And now to the important parts. We want to be able to call our worker, and create a function for doing just that.
|
1 2 3 |
function startWorking() { // Code goes here. } |
The first thing I do is checking if the browser supports workers. If it doesn’t, I can handle it in different ways. This is good if you don’t want your functionality to break due to compatibility issues.
|
1 2 3 4 |
if (!browserSupportsWebWorkers()) { // What to do if browser doesn't support workers. return; } |
Then I instantiate a new worker object, referencing the worker javascript file. And yes, the worker code needs to be located in a separate file.
|
1 2 3 4 |
worker = new Worker("javascript/worker.js"); // Create a new worker object. // Code goes here. } |
Now when we have the worker object, we need to define what will happen when we get a response from it. Communication between the foreman and worker will be passed through messages, and we need to declare what to do with those messages. The code below shows 2 ways of doing the same thing.
|
1 2 3 4 5 6 7 8 |
worker.onmessage = function(event) { // Tell the foreman what to do when the worker response comes. result.innerHTML = event.data; }; // This is another way of doing the same thing. worker.addEventListener("message", function (event) { results.innerHTML = event.data; }, false); |
In the code above, we declare that when we recieve a message from the worker, we will get that message and show it in our resultSpan by setting its innerHTML.
We may also want to handle what happens if an error occurs. In addition to the .onmessage event, we can declare the .onerror event for just this reason.
|
1 2 3 |
worker.onerror = function(event) { // Tell the foreman what to do when the worker fails. result.innerHTML = "Error: " + event.message; }; |
The last thing is to call the worker. This is done by calling the postMessage function of the worker object.
|
1 |
worker.postMessage(); // Tell the worker to start working. |
What will happen now is that the worker javascript will be loaded and executed. The results will depend on what we put in the worker.js file. All we have done in foreman.js is to say that we will present the results of the worker. So let’s take a look at the actual worker: worker.js.
|
1 2 3 4 5 6 7 8 9 10 |
var i = 0; function timedCount() { console.log("Worker says: Counting to " + i); i = i + 1; postMessage(i); setTimeout("timedCount()",500); } timedCount(); |
In this simple example, all I want to do is to illustrate a continuous process being run in the background. The worker runs a recursive function every 500 milliseconds and sends the response back to the foreman. The message is being passed by calling the postMessage function. The object put as a parameter in postMessage will be available in event.data in the foreman script. In this case it’s an integer, but it could just as well be a string or JSON object.
Calling specific worker functions
You cannot call a specific function within a worker directly. When the worker is called, it simply runs the file. However, you can implement your own handling by passing function names as parameters.
In my next example, I have another worker file, skilledWorker.js. It contains three functions. I choose to store these in an object called actions, and you will see why later. This is not required however, and there are many ways of implementing support for calling certain functions.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 |
var actions = {}; actions.count = function (parameters) { // Unpack parameters. var number = parameters; setTimeout(function () { // Call setTimeout to run function each 1000 ms. postMessage(number); // Message the foreman of the current number. number++; // Increment number. actions.count(number); // Recursively call the same function to increment number with each call. },100); } actions.calculate = function (parameters) { // Unpack parameters. var a = parameters.a; var b = parameters.b; var results = a + b; postMessage(results); } actions.read = function (parameters) { // Unpack parameters. var results = parameters.text; postMessage(results); } |
Next, I need to declare what will happen when my worker receives a message.
|
1 2 3 |
self.onmessage = function (event) { handleMessage(event); } |
This says that I should call the function handleMessage and pass my event whenever a message is received. All that’s left is implementing the handleMessage function.
|
1 2 3 4 5 6 7 8 9 10 11 12 |
function handleMessage(event) { var command = event.data.command; var parameters = event.data.parameters; var action = actions[command]; if (action) { action(parameters); } else { postMessage("Unknown command"); } } |
What happens here is that we retrieve the event.data, and get two properties from it, command and parameters. These has to be passed when calling the worker, and I will show how in a bit.
The next piece of code I got a little help from my friend and colleague Anatoly Mironov who has one of the best SharePoint blogs out there.
Since we store our functions in the object called actions, calling “actions[command]” will return the function matching the command string. If no functions matches, the value will simply be undefined. The simple if-statement allows you to check and handle what happens when trying to call a function that doesn’t exist.
The last thing we need to do is to call the worker passing the correct command and parameters.
Passing parameters
Calling a worker with parameters is still done with postMessage(). You can pass either a string or a JSON object. This example will demonstrate how to pass a JSON object. Passed parameters will be available in the worker in event.data. As you saw above, our workers handleMessage function needed the data to contain .command and .parameters. So when calling postMessage() we simply input a JSON object containing these two values.
|
1 2 3 4 5 |
worker.postMessage( { 'command': 'count', 'parameters': 1 } ); // Tell the worker to start counting. worker.postMessage( { 'command': 'calculate', 'parameters': {'a': 5, 'b': 10 } } ); // Tell the worker to calculate. worker.postMessage( { 'command': 'read', 'parameters': {'text': 'This is text the worker is supposed to read.'} } ); // Tell the worker to read the text. |
In the code above, each line will call the worker, but running different functions, which in turn use different parameters.
In conclusion
Web workers are not very difficult to work with once you understand how they work, and while their use might be limited due to the heavy initial performance cost, being able to running a background thread for large tasks can be quite powerful.
If you want to check the full code I have a GitHub repository for it here: https://github.com/Johesmil/webworkers.
If you want to learn more about Web Workers from people who actually know what they’re talking about, check out the links below. =)
Sources
Web Workers
http://www.htmlgoodies.com/html5/tutorials/introducing-html-5-web-workers-bringing-multi-threading-to-javascript.html
http://www.w3schools.com/html/html5_webworkers.asp
https://developer.mozilla.org/en-US/docs/Web/Guide/Performance/Using_web_workers
http://anders.janmyr.com/2013/02/web-workers.html
http://www.html5rocks.com/en/tutorials/workers/basics/
