HTML 5 Web Workers

Web worker is JavaScript running in the background and will not affect the performance of the page.

What is Web Worker?

When executing a script in an HTML page, the state of the page is unresponsive until the script has completed.

Web worker is JavaScript that runs in the background, independent of other scripts and will not affect the performance of the page. You can continue to do whatever you want: click, select, etc. while the web worker runs in the background.

Browser support

All major browsers support web workers except Internet Explorer.

HTML5 Web Workers Example

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

Counting:

Detect Web Worker support

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

iif(typeof(Worker)!=="undefined")
  {
  // Yes! Web worker support!
  // Some code.....
  }
else
  {
  // Sorry! No Web Worker support..
  }

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 send a message back to the HTML page.

Note: web workers are typically 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 it does not exist, - it will create a new web worker object and then run the code in "demo_workers.js":

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

Then we Messages can now be sent and received from the web worker.

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

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

When the web worker delivers a message, the code in the event listener will be executed. event.data contains data from event.data.

Terminating Web Worker

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

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

w.terminate();

Complete Web Worker example code

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

Example

   
Count numbers: 
 Start Worker
 Stop Worker 

 <script> var w; function startWorker() { 
 if(typeof(Worker)!=="undefined") { if(typeof(w)==&quot;undefined&quot;) { w=new Worker(&quot;demo_workers.js&quot;); } 
 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> 
 
  

Web Workers and DOM

Since web workers are located in external files, they cannot access the following example JavaScript objects:

window Object

document Object

parent Object

The above is the content of HTML 5 Web Workers. For more related content, please pay attention to the PHP Chinese website (www.php. cn)!