初始WebWorker
基本概念
JS单线程：我们都知道JavaScript它是一个单线程的语言，同一时间只能做一件事。比如：在浏览器中，某一时刻我们在操作dom，你们这个时刻我们就不能去运行JavaScript代码，反过来也是，当我们在运行JavaScript代码的时候，我们也不能去操作DOM，这个也就是JS的单线程。为什么要JS成单线程？因为在浏览器环境下，如果是多线程的，也就是操作DOM和运行JavaScript代码是并行处理的话，假如某个时刻，浏览器正在绘制DOM，但是这个时候的JavaScript代码改变了DOM，这样就会造成一个不一致，因此JS就被设计成了一门单线程语言。
虽然JS是单线程，但是它的宿主，我们的浏览器环境（node环境）它是一个多线程的，在浏览器和node里面只有一条JS线程，但是还有很多其他的线程。以浏览器为例，浏览器的常驻线程（如下）大概有前三个：第一个，UI线程，也就是DOM浏览器元素的回流和重绘，这个UI线程与JavaScript线程是互斥的。第二个就是JavaScript线程，单线程的运行JS代码。第三个是GUI线程，它主要是处理与用户交互的一些逻辑，比如点击某一个元素，拖动了或者缩放了这个就是由GUI线程处理的。除此之外还有NetWorker线程，网络线程，发送ajax请求，发送http请求都是走的network线程。还有File线程，读取文件。还有一个定时器线程。
UI线程 - 回流和重绘 - 与Javascript线程互斥
JavaScript线程 - 单线程运行JavaScript
GUI线程 - 交互线程
Network线程
File线程
定时器线程
这里可能会有一个问题是ajax请求对于JS来说是异步的，但是JavaScript是单线程的，这样就涉及到了一个基于事件的驱动。当我们发起一个网络请求时，浏览器会把这一部分网络请求交给network线程去处理，然后JavaScript线程等待network的指令驱动。在没有代码要运行的情况下，JavaScript线程始终是空闲的，有了事件驱动之后，它会一直处于一个轮询的状态（Event Loop），浏览器会不断查询目前是否有JavaScript线程需要运行，如果有就运行，没有就保持闲置。当一个网络请求发送出去，这个时候的JavaScript线程是处于闲置的，但是浏览器还是会不停的询问，当network线程结束后，浏览器发现有新的JavaScript代码需要执行，它就会驱动JavaScript的线程去处理网络请求返回的结果，这个就是JS 基于事件驱动的模型。
Event Loop（事件轮询图）
异步是将耗时比较长的任务放置到Event Queue 事件队列的尾部。
WebWorker
WebWorker为了解决浏览器假死这个问题而孕育而生的一项新技术。它是多线程模型，也是基于宿主。它属于JavaScript线程中的一个子线程，它完全受主线程控制，但是在WebWorker里面是不能操作DOM的。因为上面提到的UI线程和JavaScript线程是互斥的，这个互斥也就保证了DOM的唯一性，因此主的基调不能改变，但是需要有一个新的线程来分担繁杂的计算任务，这个也就是WebWorker。
浏览器的兼容性
应用场景
WebWorker是为了处理影响UI线程的JavaScript运算。因为在同一时刻，UI线程和JavaScript线程只能有一个在运行，如果这个时候JS的线程承担过多运算的话，它的耗时就变得很长，这个时候的UI线程是没有反应的，这样就造成了页面的假死
基本用法
创建WebWorker
const webWorker = new Worker('main.js');
let result = 0;
const fibonacci = (n) => {
if (n <= 1) return 1;
return fibonacci(n - 1) + fibonacci(n - 2);
}
result = fibonacci(10);
console.log('result', result);
向WebWorker发送消息(数据)
webWorker.postMessage({ number : 10 });
WebWorker接收消息
webWorker.addEventListener('message', event => {
console.log('received webworker data', event.data);
}, false);
WebWorker发送消息(返回数据)
this.postMessage(returnValue);
主线程接收WebWorker消息
webWorker.addEventListener('message', event => {
console.log('received webworker data', event.data);
}, false);
关闭WebWorker
方式一：在主线程关闭WebWorker
webWorker.terminate();
方式二：在子线程，WebWorker内部自己调用自己的close方法，不再接收新的 Macrotask(宏任务)
this.close();WebWorker调用脚本
importScripts('./one.js', './two.js');
WebWorker错误监听
webWorker.addEventListener('error', error => {
console.error(error.filename, error.lineno, error.message);
});本文内容仅供个人学习、研究或参考使用，不构成任何形式的决策建议、专业指导或法律依据。未经授权，禁止任何单位或个人以商业售卖、虚假宣传、侵权传播等非学习研究目的使用本文内容。如需分享或转载，请保留原文来源信息，不得篡改、删减内容或侵犯相关权益。感谢您的理解与支持！
