温故而知新：javascript多线程web Worker

webWorker

我们都知道JavaScript是单线程的，任务只能在主线程中按照顺序执行。而webWork的出现就是为其创建多线程环境，使用它创建的子线程只会在后台运行，不会阻塞到主线程，等到子线程执行完成任务后再把结果返回给主线程，这样做就不会影响到主线的代码执行。

它的缺点是比较消耗资源，使用完毕后应该主动关闭。

使用场景

• 比较耗时的计算任务

• 高延迟的任务(传输大文件等...)

注意事项

• 同源限制：分配给worker线程运行的脚本文件，必须与主线程的脚本文件同源
• DOM限制：worker线程所在的全局对象与主线程不一样，无法读取主线程所在网页的DOM对象，也无法使用document，window，parent这些对象，但是worker线程可以使用navigator和location对象
• 通信限制：worker线程和主线程不在同一个执行上下文环境，他们之间不能直接通信，必须通过消息完成
• 脚本限制：worker线程不能执行alert和confirm()方法，但是可以使用XMLHttpRequest对象发出ajax请求
• 文件限制：worker线程无法读取本地文件，它所加载的脚本，必须来自网络

代码实现

主线程

var scriptWorker = new Worker('./worker.js);
scriptWorker.onmessage = function (e) {
    console.log(e.data)
};
scriptWorker.postMessage('who is it')
scriptWorker.terminate() // 立即终止worker线程

worker线程

worker.js

const self = this;
self.onmessage = function (event) {
    console.log('event.data)
    self.postMessage('hi, i am a worker')
}
self.close() // 关闭worker线程