定义
Web Worker为Web内容在后台线程中运行脚本提供了一种简单的方法。线程可以执行任务而不干扰用户界面。一旦创建， 一个worker 可以将消息发送到创建它的JavaScript代码, 通过将消息发布到该代码指定的事件处理程序（反之亦然）。
特性
在worker内，不能直接操作DOM节点，也不能使用window对象的默认方法和属性。然而你可以使用大量window对象之下的东西，包括WebSockets，IndexedDB以及FireFox OS专用的Data Store API等数据存储机制。
workers和主线程间的数据传递通过这样的消息机制进行——双方都使用postMessage()方法发送各自的消息，使用onmessage事件处理函数来响应消息（消息被包含在[Message]事件的data属性中）。这个过程中数据并不是被共享而是被复制。
示例--专用Worker
html
<body>
<div>
<button id="start">开始计数</button>
<button id="stop">暂停计数</button>
<button id="clear">销毁worker</button>
<div id="tip"></div>
</div>
<script>
// 特性监测
if (window.Worker) {
// 创建worker
var myWorker = new Worker('js-worker.js');
// 错误监听
myWorker.onerror = function (event) {
console.log('worker出错');
}
document.getElementById('start').onclick = function () {
// 发送消息
myWorker.postMessage({
eventType: 'start',
});
}
document.getElementById('stop').onclick = function () {
// 发送消息
myWorker.postMessage({
eventType: 'stop',
});
}
document.getElementById('clear').onclick = function () {
//终止worker
myWorker.terminate();
}
// 接收消息
myWorker.onmessage = function (event) {
console.log('接收到反馈：' + event.data);
document.getElementById('tip').innerHTML = event.data;
}
} else {
console.log('浏览器不支持 WebWorker ');
}
</script>
</body>
js-worker.js
var counter = 0;
var timer;
//创建定时器
function createTimer() {
return setInterval(() => {
counter++;
if (counter % 10 == 0) {
postMessage(counter);
}
}, 100);
}
//接收消息
onmessage = function (event) {
console.log('接收到指令：' + event.data.eventType);
switch (event.data.eventType) {
case 'start':
timer = createTimer();
postMessage(counter);
break;
case 'stop':
if (timer) {
clearInterval(timer);
}
break;
default:
break;
}
}
共享worker
一个共享worker可以被多个脚本使用——即使这些脚本正在被不同的window、iframe或者worker访问。
生成一个新的共享worker与生成一个专用worker非常相似，只是构造器的名字不同
区别
与专用worker一个非常大的区别在于，与一个共享worker通信必须通过端口对象——一个确切的打开的端口供脚本与worker通信（在专用worker中这一部分是隐式进行的）。
在传递消息之前，端口连接必须被显式的打开，打开方式是使用onmessage事件处理函数或者start()方法。
网友评论