Posts in current category

HTML5 Web Workers


May 03, 2021 13:10 HTML5


Table of contents


HTML5 Web Workers


Web worker is JavaScript running in the background that does not affect the performance of the page, and a better explanation is that you can use an easy way provided by web worker to run scripts for web content in background threads that do not interfere with the user interface while performing tasks!


What is Web Worker?

When a script is executed in an HTML page, the state of the page is non-responsive until the script is complete.

Web worker is JavaScript that runs in the background, independent of other scripts, and does not affect the performance of the page. You can continue to do whatever you want: tap, pick content, and so on, while the web worker runs in the background.


Browser support

HTML5 Web Workers HTML5 Web Workers HTML5 Web Workers HTML5 Web Workers HTML5 Web Workers

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


HTML5 Web Workers instance

The following example creates a simple web worker that counts in the background:

计数: 307



Try it out . . .

demo_workers.js file code:

var i=0;

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

timedCount();


Check to see if your browser supports Web Worker

Before you create a web worker, check to see if the user's browser supports it:

if(typeof(Worker)!=="undefined")
{
// 是的! Web worker 支持!
// 一些代码.....
}
else
{
// //抱歉! Web Worker 不支持
}
Tips:

This step of detection is very important! You must detect before you can guarantee that the web worker will operate smoothly next!




Create a web worker file

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

Here, we create a counting script. The script is stored in demo_workers.js File:

var i=0;

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

timedCount();

An important part of the above code is the postMessage() method - which is used to send back a message to an HTML page.

Note: Web workers are typically not used for such simple scripts, but for tasks that consume more CPU resources.


Create a Web Worker object

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

The following code detects the presence of a worker, if it does not exist, - it creates a new web worker object and then runs the code in "demo_workers.js": /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;
};

When a web worker delivers a message, the code in the event listener is executed. T here is data from event.data in event.data.


Terminate the Web Worker

When we create a web worker object, it continues to listen for messages, even after the external script is complete, until it is terminated.

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

w.terminate();


The complete Web Worker instance code

We've .js the worker code in the file. Here's the code for the HTML page:

<!DOCTYPE html>
<html>
<body>

<p>Count numbers: <output id="result"></output></p>
<button onclick="startWorker()">Start Worker</button>
<button onclick="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>

Try it out . . .


Web Workers and DOM

Because the web worker is in an external file, they cannot access the following JavaScript object:

Related tutorials

Javascript tutorial