HTML5/JS - Start several webworkers

arrays, html, javascript, performance, web-worker

Solution

1. How would I run several web workers? I tried a for-loop looking like that:

There's no problem with creating more than one worker, even if you don't keep track of them in an array. See below.

2. How would I control that all have finished their work? (I need to reassembly the array and work with it later)

They can post a message back to you when they're done, with the results. Example below.

3. How many web workers really bring an improvement?

How long is a piece of string? :-) The answer will depend on the target machine on which this is running, the nature of the code running and what other resources it uses, etc. You'll have to tune for your target environment and task. You can find out how many cores are available using `navigator.hardwareConcurrency` on browsers and Deno or `os.cpus` on Node.js, but remember you're sharing those cores with other processes on the machine, it's not just your JavaScript code that's running.

4. Is there any advanced tutorial, besides the MDN-entry?

There isn't a lot "advanced" about web workers. :-) I found this article was sufficient.

Here's an example running five workers and watching for them to be done:

Main window:

display("Starting workers...");
let running = 0;
for (let n = 0; n < 5; ++n) {
    workers = new Worker("worker.js");
    workers.onmessage = workerDone;
    workers.postMessage({ id: n, count: 10000 });
    ++running;
}
function workerDone(e) {
    --running;
    display("Worker " + e.data.id + " is done, result: " + e.data.sum);
    if (running === 0) {
        // <== There is no race condition here, see below
        display("All workers complete");
    }
}
function display(msg) {
    const p = document.createElement("p");
    p.innerHTML = String(msg);
    document.body.appendChild(p);
}

`worker.js`:

this.onmessage = (e) => {
    let sum = 0;
    for (let n = 0; n < e.data.count; ++n) {
        sum += n;
    }
    this.postMessage({ id: e.data.id, sum: sum });
};

About the race condition that doesn't exist: If you think in terms of true pre-emptive threading, then you might think: I could create a worker, increment `running` to `1`, and then before I create the next worker I could get the message from the first one that it's done, decrement `running` to `0`, and mistakenly think all the workers were done.

That can't happen in the environment web workers work in. Although the environment is welcome to start the worker as soon as it likes, and a worker could well finish before the code starting the workers finished, all that would do is queue a call to the `workerDone` function for the main JavaScript thread. There is no pre-empting. And so we know that all workers have been started before the first call to `workerDone` is actually executed. Thus, when `running` is `0`, we know they're all finished.

Final note: In the above, I'm using `onmessage = ...` to hook up event handlers. Naturally that means I can only have one event handler on the object I'm doing that with. If you need to have multiple handlers for the `message` event, use `addEventListener`. All browsers that support web workers support `addEventListener` on them (you don't have to worry about the IE `attachEvent` thing).

Problem

Original source