HTML5 Web Workers with Examples

HTML5 Web Workers with Example: HTML5 has a new feature called web worker which is mainly designed for background work independently of other user interface scripts without affecting the webpage performance. The Web Worker doesn’t interrupt the user like javascript operations and the webpage runs the tasks in the background.

HTML5 Web Workers

NOTE: All the web browsers support HTML5 web workers like Firefox, Chrome, Opera, Safari and IE 10.

Create a HTML5 Web Worker File

The main use of web worker is performing a time-consuming task. Let’s see an example with javascript that counts from 0 to 100,000.

HTML 5 Web Worker Example

Here creating external javascript file with the name as “worker.js” and type following code

var i = 0;
function countNumbers() {
if(i < 100000) {
i = i + 1;
postMessage(i);
}// Wait for sometime before running this script again
setTimeout("countNumbers()", 500);
}
countNumbers();

NOTE: The Web Workers cant access DOM elements in the javascript code if you want to run using web workers. To send a message the worker object’s postMessage() method is used.

Doing Work in the Background with HTML5 Web Worker

Here we have to create a web worker file and we are going to initiate the web worker from HTML document which runs the code background inside the file “worker.js” and displays the result on a web page.

Background with Web Worker Example

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Using Web Worker</title>
<script>
if(window.Worker) {
// Create a new web worker
var worker = new Worker("worker.js");// Fire onMessage event handler
worker.onmessage = function(event) {
document.getElementById("result").innerHTML = event.data;
};
} else {
alert("Sorry, your browser do not support web worker.");
}
</script>
</head>
<body>
<div id="result">
<!--Received messages will be inserted here-->
</div>
</body>
</html>

Example Explanation

The statement used in the above example var worker = new Worker(“worker.js”); creates a new web worker object used to communicate with web workers. When a worker specifies a message and the message is sent to onmessge event handler which helps to receive a message from web workers. The message in the web worker is stored in the event. data element.

NOTE: The code that web worker runs always stored in separate javascript files that prevent web developers from writing web worker code that uses global variables or access directly the element on a web page.

Terminate a Web Worker in HTML5

However, we have learned how to create, start & receiving messages from web workers, you may want to terminate in the middle of execution.

Terminate a Web Worker Example

The following example defines how to start and stop the web workers by clicking HTML buttons. It uses the same “worker.js” javascript file which counts from 0 to 100000.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Start/Stop Web Worker</title>
<script>
// Set up global variable
var worker;function startWorker() {
// Initialize web worker
worker = new Worker("worker.js");// Run update function, when we get a message from worker
.onmessage = update;// Tell worker to get started
worker.postMessage("start");
}function update(event) {
// Update the page with current message from worker
document.getElementById("result").innerHTML = event.data;
}function stopWorker() {
// Stop the worker
worker.terminate();
}
</script>
</head>
<body>
<h1>Web Worker Demo</h1>
<button onclick="startWorker();" type="button">Start web worker</button>
<button type="button" onclick="stopWorker();">Stop web worker</button>
<div id="result">
<!--Received messages will be inserted here-->
</div>
</body>
</html>