HTML5 Web Workers

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

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

HTML5 Web Workers Example

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

<!DOCTYPE html>
<html>
<head> 
    <meta charset="UTF-8">
    <title>php中文网(php.cn)</title> 
</head>
<body>
<p>计数： <output id="result"></output></p>
<button onclick="startWorker()">开始工作</button>
<button onclick="stopWorker()">停止工作</button>
<p><strong>注意：</strong> Internet Explorer 9 及更早 IE 版本浏览器不支持 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 = "抱歉，你的浏览器不支持 Web Workers...";
        }
    }
    function stopWorker()
    {
        w.terminate();
        w = undefined;
    }
</script>
</body>
</html>

Run the program to 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 Web Worker

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

if(typeof(Worker)!= ="undefined") {
// Web worker support!
// Related code...
}
else
{
// Sorry! No Support Web Worker..
}

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 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. /p>

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": /p>

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

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

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

When we create web worker object, it continues 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 instance code
We have seen the Worker code in the .js file. Here is the code for the HTML page:

<!DOCTYPE html>
<html>
<head> 
    <meta charset="UTF-8">
    <title>php中文网(php.cn)</title> 
</head>
<body>
<p>计数： <output id="result"></output></p>
<button onclick="startWorker()">开始工作</button>
<button onclick="stopWorker()">停止工作</button>
<p><strong>注意：</strong> Internet Explorer 9 及更早 IE 版本浏览器不支持 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 = "抱歉，你的浏览器不支持 Web Workers...";
        }
    }
    function stopWorker()
    {
        w.terminate();
        w = undefined;
    }
</script>
</body>
</html>

Web Workers and DOMSince the web workers are located in external files, they are not accessible The following example JavaScript object:

window object
document object
parent object

Continuing Learning

new file

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>php中文网(php.cn)</title> </head> <body> <p>计数： <output id="result"></output></p> <button onclick="startWorker()">开始工作</button> <button onclick="stopWorker()">停止工作</button> <p><strong>注意：</strong> Internet Explorer 9 及更早 IE 版本浏览器不支持 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 = "抱歉，你的浏览器不支持 Web Workers..."; } } function stopWorker() { w.terminate(); w = undefined; } </script> </body> </html>

submit Reset Code

Automatic operation

HTML5 Web Workers

ElementaryImperial CMS enterprise imitation website tutorial

ElementaryNewbies with zero foundation in WordPress build personal blogs and corporate websites

ElementaryUltimate CMS zero-based website building instruction video

ElementaryFront-end project-Shangyou [HTML/CSS/JS technology comprehensive practice]

IntermediateVue3.0 from 0 to build a universal backend management system project practice

ElementaryZero-based front-end course [Vue advanced learning and practical application]

ElementaryWEB front-end tutorial [HTML5+CSS3+JS]

ElementaryQuick introduction to apipost

IntermediateVue3+TypeScript practical tutorial-enterprise-level project practice

ElementaryLet's briefly talk about starting a business in PHP

IntermediateVUE e-commerce project (front-end & back-end dual project actual combat)

ElementaryApipost practical application [api, interface, automated testing, mock]