js多线程Web Worker

我们知道JavaScript是单线程模型，即所有任务都在一个线程上完成，前面一个任务如果没有执行完成，后面的任务就只能等待。如果在遇到耗时的计算时，程序就会阻塞在这里，这对用户来说时不可接受的。因此我们在遇到耗时或者大量计算的时候就可以使用web worker。

什么是web worker？web worker可以为JavaScript创建多线程，且web worker 是运行在后台的 JavaScript，独立于其他脚本，不会影响页面的性能。主线程在运行的时候，worker也在后台运行，两者互不干扰，当worker线程完成任务后就可以将结果返回给主线。

使用Web Worker 有以下几个使用注意点：

1. 同源限制
worker子线程必须与主线程是同源
2. DOM限制
Worker 线程所在的全局对象，与主线程不一样，无法读取主线程所在网页的 DOM 对象，也无法使用document、window、parent这些对象。但是，Worker 线程可以navigator对象和location对象。
3. 主线程与子线程间的通信
Worker 线程和主线程不在同一个上下文环境，它们不能直接通信，必须通过postMessage消息完成。
4. 脚本限制
Worker 线程不能执行alert()方法和confirm()方法，但可以使用 XMLHttpRequest 对象发出 AJAX 请求。
5. 文件限制
Worker 线程无法读取本地文件，即不能打开本机的文件系统（file://），它所加载的脚本，必须来自网络。

基本使用–专用线程
专用线程会随当前页面的关闭而结束，所以专用线程只能被创建它的页面访问

1. 主线程

// 判断浏览器是否支持worker线程
if(window.Worker) {
    
    // 主线程通过new 来开启子线程，Worker构造函数的参数是一个脚本文件，由于Worker不能读取本地文件，因此该文件必须是来源于网络
    // 本地通过搭建临时服务来读取脚本文件，但是在线上环境需要填写网络路径，且必须是同源
    var worker = new Worker('./worker.js');
    worker.postMessage('hello worker!');
} else {
    
    console.log('浏览器不支持worker子线程。。。');
}
worker.addEventListener('message', function(res)