HTML5 web workers

web worker是在后台运行的JavaScript,不影响页面的执行.

什么是Web Worker?

在HTML页面里执行脚本时,页面会在执行完脚本后才会响应.

web worker是在后台运行的脚本,和其它脚本是独立的,不会影响页面的执行.当web worker在后台运行时你可以继续做你想做的:单击,选择之类的操作.

HTML Web Workers例子

下面的例子是一个简单的web worker例子,在后台统计数字:

在创建web worker之前,检测用户的浏览器是否支持:

if(typeof(Worker)!=="undefined") {
    // Yes! 你的浏览器支持!
    // 一些代码.....
} else {
    // 对不起! 不支持Web Worker..
}

创建一个Web Worker文件

现在,我们在外部JavaScript文件里里创建我们的web worker.

下面,我们创建一个脚本进行统计.脚本写在文件"demo_workers.js"文件里:

var i = 0;

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

timedCount();

上面代码重要的部分是postMessage()方法 - 用来发送一个消息给HTML页面.

注意:通常web workers不用于这么简单的脚本,一般用于更密集的CPU任务.

创建一个Web Worker文件

现在我们有一个web worker文件,我们需要在HTML页面调用它.

下面的代码行用来检测worker是否已经存在,如果不存在 - 它创建一个新的web worker对象并在"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;
};

当web worker发送了消息,事件监听器里的代码将会执行.web worker里的数据存储在event.data里.

结束Web Worker

当一个web worker对象被创建了,它将持续监听消息(即使外部脚本结束了)直到结束.

用terminate()方法来结束web worker,并释放浏览器或电脑的资源.

w.terminate();

重新使用Web Worker

如果你设置了worker变量为undefined,在结束后,你可以重新使用代码:

w = undefined;

完整的Web Worker代码例子

我们已经看了.js文件里的Worker代码.下面是HTML页面代码:

例子

<!DOCTYPE html>
<html>
<body>

<p>计数: <output id="result"></output></p>
<button onclick="startWorker()">开始 Worker</button> 
<button onclick="stopWorker()">停止 Worker</button>
<br><br>

<script>
var w;

function startWorker() {
    if(typeof(Worker) !== "undefined") {
        if(typeof(w) == "undefined") {
            w = new Worker("/public/js/demo_workers.js");
        }
        w.onmessage = function(event) {
            document.getElementById("result").innerHTML = event.data;
        };
    } else {
        document.getElementById("result")
.innerHTML = "对不起! 不支持Web Worker.";
    }
}

function stopWorker() { 
    w.terminate();
    w = undefined;
}
</script>
</body></html>

Web Workers和DOM

因为web workers在外部文件里,所以不能访问下面的JavaScript对象:

window object
document object
parent object

评论区

21技术 www.21xrx.com 备案号：蜀ICP备17043188号-2

其它

提取图片文字免费的JetBrains license services json在线解析 base64加解密文章搜索