一、简述
Web Worker 是 HTML5 新出的标准。众所周知 JavaScript 是单线程，为了充分利用多核 CPU 的效能，提高计算量繁杂的计算任务。在 JavaScript 中，主线程可以创建多个 Worker 子线程。Worker 子线程不影响主线程的执行，也就是不影响页面交互，只在后台运行，等到计算完成，再把结果返回给主线程。
二、特点
1. 同源限制
Worker 线程的文件必须与主线程的文件同源。
2. DOM 限制
Worker 线程不能直接操作 DOM。因为是外部 JS 文件，所以无法访问 document，window， parent 等对象。但可以访问 navigator 对象（对应下面的 WorkerNavigator 对象）和 location 对象（对应下面的 WorkerLocation 对象）。
3. 通信限制
主线程和 Worker 线程不再同一个上下文，不能直接通信，必须通过消息完成。Worker 线程通过 postMessage 发送消息。主线程通过 onmessage 接收消息。
4. 脚本限制
Worker 线程不能执行 alert 方法和 confirm 方法。但是可以通过 XML 对象发送 AJAX 请求。
5. 文件限制
Worker 线程不能打开本地文件，只能打开网络文件。
三、通信
1. Worker 线程发送消息，主线程接收消息。
- Worker 线程通过
postMessage()发送数据; - 主线程创建 Worker 线程对象
new Worker("xxx.js")。 - 主线程调用 Worker 对象的
onMessage方法，获取参数event.data。
2. 主线程发送消息，Worker 线程接收消息。
- 主线程创建 Worker 线程对象
new Worker("xxx.js")。 - 主线程调用 Worker 对象的
postMessage方法发送消息。 - Worker 线程通过
onMessage()方法，获取参数event.data。
四、使用
- 创建 demo.js 文件，内容如下：
var i=0;
function count(){
setInterval(function () {
i++;
postMessage(i);
},1000)
}
count();
- 创建 test.html 文件，内容如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div>
<span>计数</span>
<span id="result"></span>
</div>
<button onclick="work(0)">开始工作</button>
<button onclick="work(1)">停止工作</button>
<script>
var worker;
function work(type) {
if (typeof(Worker) !== "undefined") {
if(type === 0){
worker = new Worker("demo.js");
console.log(worker);
worker.onmessage=function(event){
document.getElementById("result").innerHTML=event.data;
};
}else {
worker.terminate();
worker = null;
}
}
else {
alert("抱歉! Web Worker 不支持");
}
}
</script>
</body>
</html>
