html5支持多线程,HTML5多线程是什么

什么是Web Worker?.

<

浏览器支持

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

Web Workers4.010.03.54.011.5

HTML Web Workers 实例

下面的示例创建了一个简单的web worker，它在后台计数: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;}

检查 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页面代码:

Count numbers:

Start WorkerStop Workervar 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;}