我们知道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://），它所加载的脚本，必须来自网络。
基本使用–专用线程
专用线程会随当前页面的关闭而结束，所以专用线程只能被创建它的页面访问
- 主线程
// 判断浏览器是否支持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) {
console.log('收到子线程的消息：' + JSON.stringify(res.data));
// 关闭worker线程
worker.terminate();
})
- 子线程
// 通过监听message来接受主线程中的消息
addEventListener('message', function(res) {
// 子线程向主线程中发生消息
this.postMessage('已收到主线程的消息。。。');
})
开启临时服务结果：
没有开启临时服务时，会报错
基本使用–共享线程
共享线程可以被多个页面访问，因此只有当所有关联的的页面都关闭的时候，共享线程才会结束，共享线程必须带上port
1> 主线程页面index.html
向共享子线程中发送数据
// 判断浏览器是否支持worker线程
if(window.SharedWorker) {
// 主线程通过new 来开启共享子线程，SharedWorker构造函数的参数是一个脚本文件，由于SharedWorker不能读取本地文件，因此该文件必须是来源于网络
var worker = new SharedWorker('./worker.js');
// 向子线程中发送数据
var obj = {
txt:'hello SharedWorker!',
type: 'send'
}
worker.port.postMessage(obj);
} else {
console.log('浏览器不支持SharedWorker子线程。。。');
}
worker.port.onmessage = function(res) {
console.log('收到子线程的消息：' + JSON.stringify(res.data));
}
2> 共享子线程worker.js
共享子线程必须使用 onconnect 来连接到主线程的端口，然后可以在onconnect event的ports属性中获取到与该worker相关联的端口并向主线程发送数据
下面共享接受第一个主线程发送的数据并存储，当第二个页面主线程发送获取数据时，返回第一个主线程发送的数据。
// 定义一个变量来接受主线程的数据
var msg = '';
onconnect = function(e) {
var port = e.ports[0];
port.onmessage = function(res) {
if(res.data.type == 'send') {
// 存储主线程发来的数据
msg = res.data.txt;
// 子线程向主线程中发生消息
port.postMessage('已收到主线程的消息。。。');
} else if (res.data.type == 'get') {
// 其他页面获取共享线程中的数据
port.postMessage(msg);
}
}
}
3> 主线程index2.html
向子线程中发送数据，获取上一个线程存储的数据
// 判断浏览器是否支持worker线程
if(window.SharedWorker) {
// 主线程通过new 来开启共享子线程，SharedWorker构造函数的参数是一个脚本文件，由于SharedWorker不能读取本地文件，因此该文件必须是来源于网络
var worker = new SharedWorker('./worker.js');
// 向子线程中获取上一个线程存储的数据
worker.port.postMessage({txt:'', type: 'get'});
} else {
console.log('浏览器不支持SharedWorker子线程。。。');
}
worker.port.onmessage = function(res) {
console.log('收到子线程的消息：' + JSON.stringify(res.data));
}
运行第一个页面的时候返回的结果如下：
运行第二个页面的时候就会返回第一个页面发送的数据 hello SharedWorker!