html5 workers,HTML5 Web Workers

HTML5 Web Workers

在html5规范中引入了web workers概念，解决客户端JavaScript无法多线程的问题，其定义的worker是指代码的并行线程，不过web worker处于一个自包含的环境中，无法访问主线程的window对象和document对象，和主线程通信只能通过异步消息传递机制。

什么是 Web Worker？

当 HTML 页面中执行 JavaScript 时，都是单线程执行的，这时页面的状态是不可响应的，即页面的 UI 会被锁定，若执行需要的时间过长，页面甚至会出现假死状态。这样对于用户来说是个很不好的体验，他们只能等待 UI 恢复过来才能继续操作，对于开发者来说，这也很无奈。Web Workers 则使到 JavaScript 能在后台运行 ，即在后台创建相应的线程，把费时的处理交给后台，前台便能继续响应用户的操作，这样既不会影响页面的性能，又使到用户可以继续做想做的事。

浏览器支持

所有主流浏览器均支持 web worker，除了 Internet Explorer。

检测 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 页面调用它。

下面的代码检测是否存在 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 传递消息时，会执行事件监听器中的代码。event.data 中存有来自 event.data 的数据。

多个JavaScript文件的加载与执行

由于Web Workers没有访问document对象的权限，因此不能使用常规导入JavaScript的方式，需要另一种方法来导入JavaScript，即importScripts：

importScripts("helper.js","example.js","blur.js");

多个脚本的导入会按照导入顺序执行。

与HTML5 Web Workers通信

Web Workers一旦生成，就可以使用postMessage API传送和接收数据。

为了能与Web Workers成功通信，除了在主页(调用Web Workers的页面)中添加代码外，Worker JavaScript文件中也要添加相应代码。

终止 Web Worker

当我们创建 web worker 对象后，它会继续监听消息(即使在外部脚本完成之后)直到其被终止为止。

如需终止 web worker，并释放浏览器/计算机资源，请使用 terminate() 方法：

w.terminate();

完整的 Web Worker 实例代码

我们已经看到了 .js 文件中的 Worker 代码。下面是 HTML 页面的代码：

实例

Count numbers:

Start Worker

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

}

Web Workers 和 DOM

由于 web worker 位于外部文件中，它们无法访问下例 JavaScript 对象：

•window 对象

•document 对象

•parent 对象

总结

Web Worker的基本原理就是在当前javascript的主线程中，使用Worker类加载一个javascript文件来开辟一个新的线程，起到互不阻塞执行的效果，并且提供主线程和新

线程之间数据交换的接口：postMessage，onmessage。

HTML5 Web Workers可以使得你的Web应用程序具备后台处理能力，能够支持多线程，且可以充分利用多核CPU带来的优势。以避免JavaScript循环持续运行后弹出的警告窗口。尽管Web Workers功能强大，但是也存在一些缺点，比如不能直接访问Web页面和DOM API、消耗CPU周期且导致系统反应速度变慢。如果需要Web应用执行一些后台数据处理，但又不影响Web页面本身的交互时，就可以使用Web Workers，同时需要添加一个监听器以监听它发出的消息。