v1.2.3 Web Worker Array

If one extra thread is good, how about 4?

Ok, let’s be honest… now I’m just having fun… But truthfully, this last iteration really did provide some noticeable gains on mobile…

Ahhh, who cares! Its a Web Worker Array!

This profile had me typing as fast as humanly possible!

What you see is that for every orange Key Character in the top row there is a ww worker thread available to immediately start the search (the pink bars). No more waiting for previous searches to finish. And after each ww finishes, it becomes available to take the next search.

That’s because the workerArray.js web worker is set up as a dispatcher. You cant see it because its so quick but for every Key Character the workerArray actually runs a tiny execution stack where it handles the search request message from the main thread and forwards it to the first available ww worker.

We’ve successfully resolved the “search pileup” issue. Think of it like preventing traffic by adding lanes.

Why 4 search workers? Because in my testing I was never able to type fast enough to need a 5th one (changing the number of workers turns out to be pretty trivial).

The result is that there is essentially 0 delay from Key Character input to the initiation of the search. Other than trying to find a more efficient search algorithm, we’ve successfully removed all other performance bottlenecks.

Bear in mind, I’m not saying this is the best solution. Can every mobile phone handle 4 web workers? Is the additional complexity of the code worth the performance gains? Are there safety concerns that also need to be considered that may further complicate the code?

These are all important questions, among others, that will determine the efficacy of a solution like this.

But for now, its a freaking Web Worker Array! Lets see it in action one more time:

If you’ve gotten this far, thanks for sticking around!

If there’s one major takeaway from this journey, it would definitely be:

Don’t be afraid to try new things and explore unorthodox solutions.

Whether they work or not is secondary, their value lies in the experience and knowledge gained!

For anyone interested, check out the detailed code below to see how the web worker array is set up.

BONUS

There is a small issue with the code. It requires a very small fix to make this implementation bulletproof, 2 extra lines of code max. Can you spot it and figure out how to fix it?

The SearchResults component initiates the WorkerArrayController.

The WorkerArrayController initiates the workerArray web worker along with the 4 ‘ww’ workers and passes them MessageChannel ports so they can communicate with each other.

The workerArray sets up the ports object to communicate with and keep track of each ‘ww’ worker. It also sets up the cache and queue to keep track of the latest searchTerm request in case every port is in use at the time.