Latest web development tutorials

HTML5 Web Workers

web worker run JavaScript in the background and does not affect the performance of the page.

What is a Web Worker?

When executing a script in an HTML page, the page state is unresponsive until the script is complete.

web worker run JavaScript in the background, independent of other scripts will not affect the performance of the page. You can continue to do whatever is willing to do: Click to select content, etc., at a time when web worker runs in the background.

Browser Support

Internet ExplorerFirefoxOperaGoogle ChromeSafari

Internet Explorer 10, Firefox, Chrome, Safari and Opera support Web workers.

HTML5 Web Workers examples

The following example creates a simple web worker, counting in the background:

Examples

count:




try it"

demo_workers.js file code:

var i = 0;

function timedCount ()
{
i = i + 1;
postMessage (i);
setTimeout ( "timedCount ()", 500);
}

timedCount ();

Detecting whether the browser supports the Web Worker

Before creating a web worker, please check the user's browser supports it:

if (typeof (Worker)! == "undefined")
{
// Yes! Web worker support!
//Some code .....
}
else
{
// Sorry! Web Worker is not supported
}

Create a web worker file

Now, let's create our web worker in an external JavaScript.

Here, we've created a script count. The script is stored in the "demo_workers.js" file:

var i = 0;

function timedCount ()
{
i = i + 1;
postMessage (i);
setTimeout ( "timedCount ()", 500);
}

timedCount ();

Important part of the code above is postMessage () method - it is used to return some HTML page news.

Note: web worker is generally not used for such simple scripts, but for more CPU-intensive tasks.

Create a Web Worker Object

We already have a web worker file, and now we need to call it from an HTML page.

The following code detects the presence of worker, if there is no - it creates a new web worker object and then run "demo_workers.js" code:

if(typeof(w)=="undefined")
{
    w=new Worker("demo_workers.js");
}

We can then take place and receive messages from the web worker.

Add to web worker a "onmessage" event listeners:

w.onmessage = function (event) {
. Document.getElementById ( "result") innerHTML = event.data;
};

Web Worker termination

When we create a web worker object, it will continue to listen for messages (even after the completion of an external script) until it is terminated by.

To terminate a web worker, and release the browser / computer resources, use the terminate () method:

w.terminate ();

Complete Web Worker example code

We've seen .js file Worker code. Here is the code HTML page:

Examples

<! DOCTYPE html>
<Html>
<Head>
<Meta charset = "utf-8">
<Title> This tutorial (w3big.com) </ title>
</ Head>
<Body>

<P> count: <output id = "result"> </ output> </ p>
<Button onclick = "startWorker ()"> to work </ button>
<Button onclick = "stopWorker ()"> stopped </ button>

<P> <strong> Note: </ strong> Internet Explorer 9 and earlier versions of IE browser does not support Web Workers </ p>.

<Script>
var w;

function startWorker () {
if (typeof (Worker)! == "undefined") {
if (typeof (w) == "undefined") {
w = new Worker ( "demo_workers.js");
}
w.onmessage = function (event) {
. Document.getElementById ( "result") innerHTML = event.data;
};
} Else {
document.getElementById ( "result") innerHTML = "Sorry, your browser does not support Web Workers ...".;
}
}

function stopWorker ()
{
w.terminate ();
w = undefined;
}
</ Script>

</ Body>
</ Html>

try it"

Web Workers and the DOM

Since the web worker in an external file, they can not access the JavaScript object the following example:

  • window object
  • document Object
  • parent objects