Web Worker 初探
什么是Web Worker?
Web Worker 是Html5 提出的能够在后台运行javascript的对象，独立于其他脚本，不会影响页面的性能，也不会影响你继续对于页面进行操作。通俗点讲，就是后台打杂的小工。
Why Web Worker?
Javascript 是单线程执行的，即某一时刻，一次只能做一件事情。Javascript的单线程是为了保证对dom操作的统一性，即同一时刻不会既有删除和添加同一个dom的操作，为了保证
dom树不会混乱，但是单线程执行是对于当下强大的多核CPU的一种浪费，无法充分发挥计算机的性能。为了解决上述问题，就产生了web worker，但是既要满足保证对dom树的统一
性，又要支持多线程，这就决定了web worker在程序运行时的地位（特性）。
打个比方，程序的主线程就像是只有一个厨师长的厨房，厨师长要亲自操刀整个做菜流程，配菜，加料等。web worker 就像是厨师长招来的学徒，可以帮忙切菜，帮忙看火候，帮忙调制佐料，但又不会影响整个做菜的主流程（没有权限）。
所以web worker可以用于负责处理数据，或者执行可以延后的任务。
如何编写Web Worker
可以用VSCode 创建一个空白的文件夹，添加index.html,index.js,worker.js等文件。在index.html中引入index.js，接着在index.js中编写如下代码
function main(){
let worker = new Worker('worker.js');
worker.postMessage('start');
setTimeout(()=>worker.postMessage('end'), 5000);
worker.onmessage = function(event){
console.log(event.data);
worker.terminate();
console.log(worker);
}
}
创建一个worker线程，只要通过new 关键字创建一个worker对象就行，传递的参数是woker线程要执行的js脚本，即我们现在给我们的小工分配了工作任务。
主线程和worker如何通信(厨师长如何给学徒安排任务)
主线程和worker之间的通信只能通过postMessage 和 onMessage 来进行，主线程通过postMessage来向worker传递信息，worker线程也是通过postMessage来向主线程传递信息，主线程通过onMessage来接收worker传递过来的信息。
worker线程通过addEventListener('message', callback) 来监听主线程通过postMessage传递的信息。
下面是一个worker线程的简单例子
let number = 0;
let intervalId = 0;
this.addEventListener('message', (e)=>{
const data = e.data;
console.log(e.data);
switch(data){
case 'start':
this.startCountNumber(); break;
case 'end':
this.endCountNumber(); break;
default:
break;
}
})
function startCountNumber() {
this.intervalId = setInterval(()=>{number++;console.log(number)}, 1000);
}
function endCountNumber() {
clearInterval(this.intervalId);
self.postMessage('done')
}
这是一个用来计数的worker，但是开始结束都由主线程开始，有兴趣的可以改写一下，主线程通知开始任务，当worker完成后，worker通知主线程任务完成。（厨师长安排任务给学徒，学徒做完后通知厨师长）。
当编写完这两个js文件后，可以通过打开浏览器访问index.html来对这个worker 进行测试。（index.html 不再贴出）
这里有一个值得注意的点，如果测试的时候是直接打开本地html文件，那么不能用chrome，chrome出于安全问题，会没法加载worker.js（CORS）。换用其它的浏览器即可，或者搭建本地服务器去运行亦可。
Web Worker注意点
为什么用厨师长和学徒的例子，就是为了体现web worker的几个注意点。
1. 学徒无法直接干预厨师长的工作（worker 只能通过postMessage 来向mai'n thread 传递信息)
2. worker 没法直接读取或者操作dom，也没法使用window，parent等对象，但可以读取navigator, location对象。
3. web worker加载的脚本必需和主线程脚本同源（厨师长和学徒需要是一个厨房里的）
4.厨师长可以招多个学徒（主线程可以创建多个worker线程)
web worker 又分dedicated worker 和shared worker，有兴趣的可以深入了解下。
以及web worker的错误处理onError, web worker 发送异步请求等。
