Javascript Web Worker example with explanation

4+

JavaScript Web Worker example

If you’re here then you’ve some JavaScript knowledge. Isn’t it? Currently, I am working on the series of create own Observable. And previously ended the Crash course on RxJS. But I thought you should be hands on the Web Worker.

Okay, But What is Web Worker? 😕

Long time ago, When Javascript introduce to the world. Then no one care about the performance. But after nearly 25 years, Javascript take the other language down and popular in now a day. Javascript comes with many of professional features in which one of them is web worker.

Javascript Web Worker example with explanation
Javascript Web Worker example with explanation

Understand, But my question is same. What is web worker?

Slow down mate, I am coming to the answer. Generally, Web workers are designed to let you run big jobs without freezing up the page. Have you ever faced the “Page Unresponsive” pop up message?

Page Unresponsive
If you get this message. Then you can feel the pain of this pop-up.

Your screen would be stuck and no any events can be performed until previous work is not finished. Okay let me show you the little example for you.

Click on Result in above JsFiddle. It is an example of prime number searcher between given two number. First of all, click on the Start Searching button. And try to change the number of textbox until result not showing in text-area.

Have you experience lag? Hell yeah!!!

This is the small example of this type of problem. It won’t freeze your page but experience the small piece of this type of problem.

What is happening with the code?

As you experience, You won’t be able to click, scroll, or interact with anything. Clearly, this page can be improved with web workers. But before you get to that, you need to take a closer look at the current JavaScript code. Right now, when you click the Search button it triggers the doSearch() function shown here:


In brief, first it grabs some information from the page, then it performs a calculation, then it insert the results back into a <div> so you can see them.

At line 7, findPrimes() is a method to find the prime numbers between given two digits.

Okay, I got the problem. But How can I implement the web worker?

Web workers let you do any time-consuming job in the background. The process is simple:

  1. You create a web worker.
  2. You tell the web worker what to do. (For example, crunch these numbers!)
  3. You start the web worker.
  4. When the web worker is done, it tells you, and your code goes from there. (For example, show the results on your page.)

Let’s dive in!

First of all, you’ve to create an object of web worker that runs the code in the file named PrimeWorker.js


The code that a worker runs is always stored in a separate JavaScript file. This design discourages newbie programmers from writing web worker code that attempts to use global variables or directly access elements on the page. Neither of these operations is possible.

Why? Because bad things can happen if more than one thread attempts to manipulate the same data at the same time.

Web pages and web workers communicate by exchanging messages. To send data to a worker, you call the worker’s postMessage() method:


Web worker working internally
Web worker working internally

Similarly, when your worker needs to talk back to the web page, it calls its own postMessage() method, along with some data, and the web page receives an onMessage event.

Note: The postMessage() function allows only a single value.

But in this example we need two elements (two number for range). The solution is to package these two details into an object literal. This code shows one example, which gives the object two properties (the first named from, and the second named to), and assigns values to both of them:


Enough talk, now we will do real work.


Create a PrimeWorker.js file at same location and code is given below:


When the worker calls postMessage(), it fires the onMessage event, which triggers this function in the web page:


Overall, the structure of the code has changed a bit, but the logic is mostly the same. The result, however, is dramatically different.

Do you want to see the example on JsFiddle?

You can scroll down, type in the text boxes, and select numbers in the list from the previous search. Do you have any question? Then you can query with us in comment section below.

Wait… What about the canceling the background task and progress information?

This article is not finished here, Please check the article : How to Handle the Javascript Web Worker task?

4+
Summary
Javascript Web Worker example with explanation
Article Name
I was working on the series of create own Observable. And previously ended the Crash course on RxJS. But I thought you should be hands on the Web Worker.
Description
I was working on the series of create own Observable. And previously ended the Crash course on RxJS. But I thought you should be hands on the Web Worker.
Author
Publisher Name
Das JS
Publisher Logo