Web Development

Workers in the Web

Workers in the Web is part 11 of Beginner’s Guide to HTML5.

JavaScript is an amazing client side scripting language. Combining HTML5 with it, you will get a handful of new functionality. So our topic in this article, Web Worker. A web worker is a JavaScript running in the background, without affecting the performance of the page. Previously when executing scripts in an HTML page, the page becomes unresponsive until the script is finished. But with HTML5, this web worker script runs independently of other scripts, without affecting the performance of the page. You can continue to do whatever you want: clicking, selecting things, etc., while the web worker runs in the background.

So let’s see how to do this.

First of all you need to check whether the browser is supports this feature.

[code language=”js”] if(typeof(Worker) !== “undefined”) {
// Yes! Web worker support!
// Some code…..
} else {
// Sorry! No Web Worker support..

Following is our web worker scripting file which counts numbers incrementally. If you see, it called itself recursively.

[code language=”js”] var i = 0;

function timedCount() {
i = i + 1;


We need to save this external script file as demo_workers.js

Normally web workers are not used for such simple scripts, but for more CPU intensive tasks.The important part of the code above is the postMessage() method – which is used to post a message back to the HTML page.

Now let’s create the web worker object. Now that we have the web worker file, we need to call it from an HTML page. The following lines checks if the worker already exists, if not – it creates a new web worker object and runs the code in “demo_workers.js”

This code segment should be included in the true condition of the if else statement.

[code language=”js”] if(typeof(w) == “undefined”) {
w = new Worker(“demo_workers.js”);

Then we can send and receive messages from the web worker. Add an “onmessage” event listener to the web worker.

[code language=”js”] w.onmessage = function(event){
document.getElementById(“result”).innerHTML = event.data;

When the web worker posts a message, the code within the event listener is executed. The data from the web worker is stored in event.data.

Like this you can run a script on the background without making user aware. As make it self running, there should be a way to terminate it without making user aware.

When a web worker object is created, it will continue to listen for messages (even after the external script is finished) until it is terminated. To terminate a web worker, and free browser/computer resources, use the terminate() method.

[code language=”js”] w.terminate();

If you set the worker variable to undefined, after it has been terminated, you can reuse the code.

[code language=”js”] w = undefined;

But important thing to remember. Since web workers are in external files, they do not have access to the following JavaScript objects:

  • The window object
  • The document object
  • The parent object


This is all about workers who do the work behind the scene. There may be lot of workers working even in this web site without making you aware, without loosing the performance. Next section is our last article in this new edition of HTML5 tutorial. So keep waiting…

What’s Next?

Learn how to get Messages from Server.

Join Our Newsletter Today

Stay updated with all latest updates.
Give it a try, you can unsubscribe anytime.

About the author

Sandeep Likhar

Sandeep Likhar from Indore India, Blogger, eBook Designer and Founder of LetsDnD. Having five years of experience in industry as a Digital Publishing Expert and eBook Converter providing services to Authors, Publishers and distributors worldwide. Proficient in converting books into various formats HTML, epub, mobi, word, PDF including all major online platforms iTunes, Kobo, Kindle, Createspace, B&N, Smashwords and more.

Subscribe To Newsletter
Be the first to get latest updates and exclusive content straight to your email inbox.
Stay Updated
Give it a try, you can unsubscribe anytime.

Join Our Newsletter Today

Stay updated with all latest updates.
Give it a try, you can unsubscribe anytime.