精通
英语
和
开源
，
擅长
开发
与
培训
，
胸怀四海
第一信赖
精通
英语
和
开源
，
擅长
开发
与
培训
，
胸怀四海
第一信赖
在html5规范中引入了web workers概念，解决客户端JavaScript无法多线程的问题，其定义的worker是指代码的并行线程，不过web worker处于一个自包含的环境中，无法访问主线程的window对象和document对象，和主线程通信只能通过异步消息传递机制。
当 HTML 页面中执行 JavaScript 时，都是单线程执行的，这时页面的状态是不可响应的，即页面的 UI 会被锁定，若执行需要的时间过长，页面甚至会出现假死状态。这样对于用户来说是个很不好的体验，他们只能等待 UI 恢复过来才能继续操作，对于开发者来说，这也很无奈。Web Workers 则使到 JavaScript 能在后台运行 ，即在后台创建相应的线程，把费时的处理交给后台，前台便能继续响应用户的操作，这样既不会影响页面的性能，又使到用户可以继续做想做的事。
所有主流浏览器均支持 web worker，除了 Internet Explorer。
在创建 web worker 之前，请检测用户的浏览器是否支持它：
if(typeof(Worker)!=="undefined")
{
// Yes! Web worker support!
// Some code.....
}
else
{
// Sorry! No Web Worker support..
}
现在，让我们在一个外部 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 文件，现在我们需要从 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 的数据。
由于Web Workers没有访问document对象的权限，因此不能使用常规导入JavaScript的方式，需要另一种方法来导入JavaScript，即importScripts：
importScripts("helper.js","example.js","blur.js");
多个脚本的导入会按照导入顺序执行。
Web Workers一旦生成，就可以使用postMessage API传送和接收数据。
为了能与Web Workers成功通信，除了在主页（调用Web Workers的页面）中添加代码外，Worker JavaScript文件中也要添加相应代码。
当我们创建 web worker 对象后，它会继续监听消息（即使在外部脚本完成之后）直到其被终止为止。
如需终止 web worker，并释放浏览器/计算机资源，请使用 terminate() 方法：
w.terminate();
我们已经看到了 .js 文件中的 Worker 代码。下面是 HTML 页面的代码：
<p>Count numbers: <output id="result"></output></p>
<button onclick="startWorker()">Start Worker</button>
<button onclick="stopWorker()">Stop Worker</button>
<br /><br />
<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();
}
</script>
</body>
</html>
Web Worker的基本原理就是在当前javascript的主线程中，使用Worker类加载一个javascript文件来开辟一个新的线程，起到互不阻塞执行的效果，并且提供主线程和新 线程之间数据交换的接口：postMessage，onmessage。
HTML5 Web Workers可以使得你的Web应用程序具备后台处理能力，能够支持多线程，且可以充分利用多核CPU带来的优势。以避免JavaScript循环持续运行后弹出的警告窗口。尽管Web Workers功能强大，但是也存在一些缺点，比如不能直接访问Web页面和DOM API、消耗CPU周期且导致系统反应速度变慢。如果需要Web应用执行一些后台数据处理，但又不影响Web页面本身的交互时，就可以使用Web Workers，同时需要添加一个监听器以监听它发出的消息。