HTML5 Web Workers
Web Workers
The concept of web workers is introduced in the html5 specification to solve the problem that client-side JavaScript cannot be multi-threaded. The worker defined refers to the parallel thread of the code, but the web The worker is in a self-contained environment and cannot access the window object and document object of the main thread. It can only communicate with the main thread through the asynchronous message passing mechanism
We need to put the JavaScript code that we want to execute separately into a separate js file, and then call the Worker constructor in the page to create a thread. The parameter is the file path. If the parameter storage is a relative address, then the script containing the statement that calls the Worker constructor should be used as a reference. If it is an absolute path, It is necessary to ensure the same origin (protocol + host + port). This file does not require us to use script tags to display references on the page
var worker=new Worker('js/worker.js');
Simple Small example
Display all the numbers from 0 to 10000 that can be divisible by n on a page. Of course, we don’t use i*n to make the calculation a little more complicated
index.html
<!DOCTYPE html>
<html>
<head>
<title>Web Workers</title>
</head>
<body>
<h1>Web Workers</h1>
<div id="test" style="width:500px;"></div>
<script type="text/javascript">
var worker=new Worker('js/worker.js');
worker.postMessage({
n:69
});
worker.onmessage=function(e){
var test=document.getElementById('test').innerHTML=e.data;
};
</script>
</body>
</html>/js/worker.js
function calc(n){
var result=[];
for(var i=1;i<10000;i++){
var tem=i;
if(i%n==0){
if(i%(10*n)==0){
tem+='<br/>';
}
result.push(tem);
}
}
self.postMessage(result.join(' '));
self.close();
}
onmessage=function(e){
calc(e.data.n);
};Display effect:
Create web worker file
Now, Let's create our web worker in an external JavaScript.
Here we create the counting script. The script is stored in the "demo_workers.js" file:
var i=0;
function timedCount()
{
i=i+1;
postMessage(i);
setTimeout("timedCount()",500);
}
timedCount();
The important part of the above code is the postMessage() method - it is used to pass a message back to the HTML page.
Note: web workers are usually not used for such simple scripts, but for more CPU-intensive tasks.
Create Web Worker Object
We already have the web worker file, now we need to call it from the HTML page.
The following code detects whether the worker exists. If not, - it creates a new web worker object and then runs the code in "demo_workers.js":
if(typeof (w)=="undefined")
{
w=new Worker("demo_workers.js");
}
Then we can happen from the web worker and Received the message.
Add an "onmessage" event listener to the web worker:
w.onmessage=function(event){
document.getElementById("result").innerHTML= event.data;
};
<pWhen web="" worker="" delivers a message, the code in the event listener is executed. event.data="" contains data from ="" event.data="".
Terminate Web Worker
After we create the web worker object, it will continue to listen for messages (even after the external script completes) until its until terminated.
To terminate the web worker and release browser/computer resources, please use the terminate() method:
w.terminate();
