Home » Tutorials » JavaScript » Say Hello to HTML5 Web Worker

Say Hello to HTML5 Web Worker

Say Hello to HTML5 Web Worker

  • Stumble it!
  • Share

Have you ever been to a website that didn’t respond to your click and froze or crashed your browser? The cause most likely JavaScript, especially those site with JavaScript-heavy. In order to speed up your JavaScript processing time, there are several ways to optimize your JavaScript, such as with the help of Web Worker.

The Web Worker allows you to do things like fire up long-running scripts to handle intensive tasks, without interfering with the user interface and in addition, the Web Worker can perform I/O using XMLHttpRequest.

Browser Support

Not all browsers support Web Workers, so they should be used with care. To detect whether a user’s browser supports Web Workers, you can test for the existence of the window object’s Worker property:

if (window.Worker) {
		alert("Yes! Supported");
	} else {
		alert("Not Supported");	
};

Start A Web Worker

The Web Worker run in an isolated thread. As a result, the code that they execute needs to be contained in a separate file. But before we do that, the first thing to do is create a new Web Worker object in your main page. All you need to do is call the Worker() constructor, specifying the URI of a script to execute in the worker thread:

Main Page

var worker = new Worker('worker.js');

After we creating our Worker, communicate it by using the postMessage method. You can pass a variable to it and create a receiver(onmessage event) to receive the return message from worker.js:

Main Page

var worker = new Worker('worker.js');
var message = 'Hello, I am Web Workers!';
worker.postMessage(message);
worker.onmessage = function (event) {
  alert(event.data);
};

Ok. We have created a Web Worker in Main Page so far, let’s build up the worker to receive the message from Main Page by using the onmessage event:

worker.js

onmessage = function(event) {
  var info = event.data;
};

And your Web Worker can send back the message to Main Page by using the same method:

worker.js

onmessage = function(event) {
  var info = event.data;
  var result = info + ' Nice to meet you!';
  postMessage(result);
};

Ok, we have done our worker.js. Now you can test it by viewing your Main Page and you will get an alert pop up message as shown below:
Say Hello to HTML5 Web Worker

Things To Bear In Mind

Here is the list of what Web Workers do and don’t access to:

  • Can use:
    • navigator object
    • location object (read-only)
    • importScripts() method (for accessing script files in the same domain)
    • JavaScript objects such as Object, Array, Date, Math, String
    • XMLHttpRequest
    • setTimeout() and setInterval() methods
  • Can’t use:
    • DOM
    • The worker’s parent page (except via postMessage())

Read More About HTML5 Articles


  • Create jQuery Responsive Content Slider For Mobile In 5 Minutes!
  • Enhancing Google Map Interactivity with jQuery
  • How To Create jQuery Password Strength Indicator in 10 Minutes!

Android, iOS Development Tutorials