HTML5多线程

一个web worker是一个在后台运行的JavaScript，不影响页面的性能

什么是Web Worker?.

当执行脚本的HTML页面，页面变得反应迟钝，直到脚本完成

一个web worker是一个在后台运行的JavaScript, 独立于其他脚本,不影响页面的性能. 你可以继续做任何你想做的事情：点击，选择东西等，而web worker在后台运行.

浏览器支持

表中的数字指定第一个完全支持web worker的浏览器版本.

API
Web Workers	4.0	10.0	3.5	4.0	11.5

HTML Web Workers 实例

下面的示例创建了一个简单的web worker，它在后台计数:

<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 = "Sorry, your browser does not support Web Workers...";
    }
}

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

让我试试

检查 Web Worker 的支持

在创建web worker之前，请检查用户的浏览器是否支持它:

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

创建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 Worker不只简单的脚本，而是用于更多的CPU密集型任务.

创建一个Web Worker对象

现在我们有Web Worker文件，我们需要从一个HTML页面调用它.

下面的行检查是否Web Worker已经存在, 如果不存在-它创建一个新的Web Worker对象并在"demo_workers.js"中运行代码:

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

然后，我们可以从web worker发送和接收消息

添加一个"onmessage"事件监听器到web worker.

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

当Web Worker发布消息时，将执行事件侦听器内的代码. 来自Web Worker的数据存储在 event.data.

结束一个Web Worker

当一个web worker对象被创建时, 它将继续侦听消息（即使外部脚本完成后），直到它被终止。

终止一个 web worker, 并且是否浏览器/计算机资源, 使用terminate()方法:

w.terminate();

重用Web Worker

如果将web worker变量设置为undefined，在它被终止后，您可以重用代码:

w = undefined;

完整的web worker示例代码

们已经在看到web worker 在js文件中的代码。下面是HTML页面代码:

<!DOCTYPE html>
<html>
<body>

<p>Count numbers: <output id="result"></output></p>
<button onclick="startWorker()">Start Worker</button>
<button onclick="stopWorker()">Stop Worker</button>

<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 = "Sorry! No Web Worker support.";
    }
}

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

</body>
</html>

让我试试

Web Workers 和 DOM

由于Web worker 在外部文件中，他们不能访问下面的JavaScript对象:

window 对象
document 对象
parent 对象