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://），它所加载的脚本，必须来自网络。
例子：
export const createWorker = f => {
let pendingJobs = {}
const worker = new Worker(URL.createObjectURL(new Blob([
`onmessage = ({ data: { jobId, params } }) => {
const result = (${f.toString()})(...params)
postMessage({ jobId, result })
}`
])))
worker.onmessage = ({ data: { result, jobId } }) => {
// 调用resolve，改变Promise状态
pendingJobs[jobId](result);
// 删掉，防止key冲突
delete pendingJobs[jobId];
}
return (...params) => new Promise(resolve => {
const jobId = String(Math.random());
pendingJobs[jobId] = resolve;
worker.postMessage({ jobId, params })
})
}
//使用worker
import { createWorker } from './worker.js'
const handleLoopDataShow = param => {
let data = [];
param.map((item) => {
data = data.concat(item);
});
return data;
}
const showWorker = createWorker(handleLoopDataShow);
showWorker(arr).then(val => {
console.log ('do somethings');
});
