HTML5 Web Workers-H5 Tutorial-php.cn

HTML5 Web Workers

高洛峰

Release： 2017-02-06 14:05:16

Original

1500 people have browsed it

What is Web Worker?

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

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

Web worker is JavaScript running 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.

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>菜鸟教程(runoob.com)</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>

demo_workers.js 文件代码：

var i=0;

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

timedCount();

Copy after login

Detect whether the browser supports Web Worker

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

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

Copy after login

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();

Copy after login

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.

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");
}
然后我们就可以从 web worker 发生和接收消息了。
向 web worker 添加一个 "onmessage" 事件监听器：
w.onmessage=function(event){
    document.getElementById("result").innerHTML=event.data;
};

Copy after login

Terminate the Web Worker

When we create a 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 instance Code

We have seen the Worker code in the .js file. The following is the code of the HTML page:

Example

<!DOCTYPE html>
<html>
<head>
 <meta charset="utf-8">
 <title>菜鸟教程(runoob.com)</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>

Copy after login

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

    window 对象
    document 对象
    parent 对象

Copy after login

More For articles related to HTML5 Web Workers, please pay attention to the PHP Chinese website!