// 主进程代码 let w1 = new Worker('./js/my.js') w1.addEventListener('message',function(evt){ console.log('evt',evt.data) }) w1.postMessage('main path message')
// 子进程代码(my.js文件)
// 给主进程发送消息
this.postMessage('the result is 100')
// 接受主进程消息（方法一）
// this.onmessage = ret => {
// console.log(ret.data)
// }
// 接受主进程消息（方法二）
this.addEventListener('message',function(evt){
console.log(evt.data)
// 关闭自己进程
this.close()
})
Web Worker 有以下几个使用注意点：
（1）同源限制
分配给 Worker 线程运行的脚本文件，必须与主线程的脚本文件同源。
（2）DOM 限制
Worker 线程所在的全局对象，与主线程不一样，无法读取主线程所在网页的 DOM 对象，也无法使用document、window、parent这些对象。但是，Worker 线程可以navigator对象和location对象。
（3）通信联系
Worker 线程和主线程不在同一个上下文环境，它们不能直接通信，必须通过消息完成。
（4）脚本限制
Worker 线程不能执行alert()方法和confirm()方法，但可以使用 XMLHttpRequest 对象发出 AJAX 请求。
（5）文件限制
Worker 线程无法读取本地文件，即不能打开本机的文件系统（file://），它所加载的脚本，必须来自网络。
Web Worker 通常应用于哪些方面呢？
处理密集型数学计算
大数据集排序
数据处理（压缩、音频分析、图像处理等）
高流量网络通信
实例：
Worker 线程完成轮询
有时，浏览器需要轮询服务器状态，以便第一时间得知状态改变。这个工作可以放在 Worker 里面。
sharedWorker：共享线程，同源策略下，多个运行环境共用同一个线程，包括数据。
// 共享线程的JS文件 (my.js文件) var a = 1; onconnect = function (e) { var port = e.ports[0]; port.onmessage = function () { port.postMessage(a++) } }
// html文件（index.html） <!DOCTYPE html> <html> <head><meta charset="utf-8"><title>worker demo</title></head> <body> <div> <h1>使用shared worker:</h1> </div> <button style="padding: 10px; margin: 10px 0;">点击一下</button> <div><span>点了 <span class="time">-</span> 下</span></div> <iframe src="index2.html" width='500px' height="400px"></iframe> <script> let button = document.querySelector('button'); let worker = new SharedWorker('worker.js'); worker.port.start(); let time; button.addEventListener('click', function () { worker.port.postMessage('start'); }); let timeDom = document.querySelector('.time'); worker.port.onmessage = function (val) { timeDom.innerHTML = val.data } </script> </body> </html>
// html文件（index2.html） <!DOCTYPE html> <html> <head><meta charset="utf-8"><title>worker demo</title></head> <body> <div><h1>使用shared worker:</h1></div> <button style="padding: 10px; margin: 10px 0;">点击一下</button> <div><span>点了 <span class="time">-</span> 下</span></div> <script> let button = document.querySelector('button'); let worker = new SharedWorker('worker.js'); worker.port.start(); let time; button.addEventListener('click', function () { worker.port.postMessage('start'); }); let timeDom = document.querySelector('.time'); worker.port.onmessage = function (val) { timeDom.innerHTML = val.data } </script> </body> </html>