web front end HTML5 Web Workers Basics tutorial

HTML5 Web Workers

web worker is a JavaScript running in the background, the page will not affect the performance, a better explanation is that you can use a simple web worker provides a method to run the scripts for web content in a background thread, these threads on a mission the process does not interfere with the user interface!

What is a Web Worker?

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

web worker is a JavaScript running in the background, independent of other scripts will not affect the performance of the page. You can continue to do anything willing to do: Click to select content, etc., at a time when web worker runs in the background. Create a front-end learning qun438905713, most in the group are zero-based learners, we help each other, answer each other, and also to prepare a lot of learning materials, welcomed the zero-based junior partner to the exchange.

Browser support

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

HTML5 Web Workers examples

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

Examples

Count: 307

Stop start Worker Worker

try it"

demo_workers.js file code:

var i=0;

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

timedCount();

Detect whether the browser supports the Web Worker

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

IF (typeof (Worker)! == "undefined")
{
// Yes! Web worker support!
// some code .....
}
the else
{
// // sorry! Web Worker is not supported
}

prompt:

This step is very important to detect! You must first detect the following in order to ensure a smooth operation of web worker!

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 above code is the postMessage () method - which is used to return the HTML page message section.

Note: Web worker is generally not used for such a simple script, but for more CPU-intensive task resources.

Create a Web Worker Object

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

The following code to detect the presence worker, if there is no - it creates a new web worker object and then run the code "demo_workers.js" in: / p>

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

Then we can send and receive messages from the web worker.

Add a "onmessage" event listener to the web worker:

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

<P web worker when the message is transmitted, executes the code in the event listener. event.data there in the data from event.data.

Termination Web Worker

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

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

w.terminate();

Complete Web Worker example code

We have seen the Worker code for .js file. Here is the code HTML page:

Examples

<!DOCTYPE html>
<html>
<body>

<p>Count numbers: <output id="result"></output></p>
<button οnclick="startWorker()">Start Worker</button>
<button οnclick="stopWorker()">Stop Worker</button>
<br><br>

<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();
}
</script>

</body>
</html>