JS多线程WebWorker 一,介绍与需求 1.1,介绍
Web Worker可以为JavaScript创建多线程，且Web Worker 是运行在后台的 JavaScript，独立于其他脚本，不会影响页面的性能。主线程在运行的时候，worker也在后台运行，两者互不干扰，当worker线程完成任务后就可以将结果返回给主线。
当我们创建一个新的worker时，该代码会运行在一个全新的javascript的环境中（WorkerGlobalScope）运行,是完全和创建worker的脚本隔离，这时我们可以吧创建新worker的脚本叫做主线程，而被创建的新的worker叫做子线程。
WorkerGlobalScope是worker的全局对象，所以它包含所有核心javascript全局对象拥有的属性如JSON等，window的一些属性，也拥有类似于XMLHttpRequest()等。
目前基本所有主流浏览器均支持 Web Worker，除了 Internet Explorer。
1.2,需求JavaScript是单线程模型，即所有任务都在一个线程上完成，前面一个任务如果没有执行完成，后面的任务就只能等待。如果在遇到耗时的计算时，程序就会阻塞在这里，这对用户来说时不可接受的。因此我们如果在遇到耗时或者大量计算的时候就可以使用Web Worker,以免影响用户的使用体验。
二,WebWorker的使用 2.1,WebWorker的限制WebWorker是浏览器为我们提供的一个可以在浏览器后台开启一个新的线程的API，使得运行在浏览器中的 js 有了多线程的能力。但是这并不意味这js本身就支持多线程，因为这种新线程有很多限制：
同源限制
worker线程执行的脚本文件必须和主线程的脚本文件同源的。
文件限制
为了安全，worker线程无法读取本地文件即不能打开本机的文件系统（file://），它所加载的脚本必须来自网络，且需要与主线程的脚本同源
DOM操作限制
worker线程在与主线程的window不同的另一个全局上下文中运行，其中无法读取主线程所在网页的DOM对象，也不能获取 document、window、parent等对象，但是可以获取navigator、location(只读)、XMLHttpRequest、setTimeout等浏览器API。
通信限制
Worker 线程和主线程不在同一个上下文环境，它们不能直接通信，必须通过postMessage消息完成。
脚本限制
Worker 线程不能执行alert()方法和confirm()方法，但可以使用 XMLHttpRequest 对象发出 AJAX 请求。
有一种连续转换的方式可以直接将一个普通函数变成WebWorker对象,如下图所示：
不用加载JS文件,直接使用方法,如下：
1 // 子进程方法 2 function runWork() { 3 onmessage = ({ data: { processId, message } }) => { 4 console.log('收到主线程消息：' + message); 5 postMessage({ processId, result: message * 2 }); 6 }; 7 } 8 const makeWorker = (func) => { 9 let pendingProcesss = {}; 10 if (!window.Worker) {//浏览器不支持worker子线程的情况 11 alert('浏览器不支持worker子线程'); 12 return; 13 } 14 //创建新的Worker 15 const worker = new Worker( 16 URL.createObjectURL(new Blob([`(${func.toString()})()`])) 17 ); 18 //接收消息 19 worker.onmessage = ({ data: { result, processId } }) => { 20 // 调用resolve，改变Promise状态 21 pendingProcesss[processId](result); 22 // 删掉，防止进程id冲突 23 delete pendingProcesss[processId]; 24 // 关闭worker线程 25 worker.terminate(); 26 } 27 28 //异常处理 29 worker.onerror = function (err) { } 30 31 return (...message) => new Promise(resolve => { 32 const processId = String(Math.random())//new Date().getTime() 33 pendingProcesss[processId] = resolve; 34 //传递参数 35 worker.postMessage({ processId, message }); 36 }) 37 } 38 const testWorker = makeWorker(runWork); 39 console.log('主线程正常运行：1') 40 testWorker(260).then((num) => { 41 console.log(`收到子线程的消息：${num}`) 42 }) 43 console.log('主线程正常运行：2')