一.前言
众所周知Javascript程序在浏览器环境运行是单线程运行的,如以下小明的做题方案。
eg: 打个比方说，学校布置了语文、数学、英语三种作业
单线程：
小明的做题方案：一个人按顺序做语文---->数学---->英语
多线程：
小强的做题方案： 找了两个伙伴，小强和他的伙伴在同一张桌子上同时做语文、数学、英语
子线程：
小华的做题方案： 找了三个伙伴，他们分别在不同的桌子上同时做语文、数学、英语，小华单独做其他作业。
二.场景
1.我们知道了在浏览器中运行的过程和小明的是一样的，随之而来的就会存在以下问题。
- 如果科任老师太多，比如有8个老师布置作业，就会导致作业过多，一门一门的去做，就会影响到后面要做的作业。
- 如果某一科作业量太大，比如语文---->数学---->英语，结果数学老师给了十张卷子，那小明就会一直卡在数学作业上而很久进行不了英语作业。
三.解决方案webworker子线程
- 1.与多线程不同，子线程是在其现有的主线程上分流出一条或多条线程，这些分流的线程就是子线程（如小华的方案）。而多线程是多条线程混在一起，同时执行（如小强的方案）。
- 2.多线程会共享内存，或因为内存原因相互影响。子线程是一个单独的空间，只有主线程与其进行通讯才会影响其运行。
四.代码实现
1.主线程代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body></body>
</html>
<script>
let worker = new Worker('./worker.js'); // 创建了一个worker子线程，建立主线程和子线程之间的联系
worker.postMessage({ msg: '这是一个worker' }); // 向子线程发送一条数据
worker.addEventListener('message', function (e) { // 监听来自子线程的消息
let workerData = event.data;
console.log(workerData.msg); // worker收到了来自主线程的请求
});
</script>
2.子线程代码
self.addEventListener('message', function (e) {// 2.接收来自子线程的消息
let data = e.data;
console.log(data.msg); // 这是一个worker
this.self.postMessage({ msg:'worker收到了来自主线程的请求' });
});
注意事项： 以上代码只能运行在服务环境中，可以使用小皮，tomcat等工具或使用vue项目启动一个服务。因为浏览器不能直接加载本地文件。
五.总结
1.当主线程创建好一个worker子线程后，主线程会继续执行后续的代码，而不需要等待子线程中的执行情况，避免了因主线程处理的量大造成的卡顿问题。
