JS：Web Worker

由于JS单线程特点，所有任务只能依次执行，无法利用CPU多线程优势，进行计算密集或高延迟任务会造成线程阻塞和UI卡顿。

Web Worker可以在JS主线程外创建一个Worker线程来执行JS任务，与主线程互不干扰，减轻主线程负担。

由于Worker线程一旦创建成功，即会一直运行，不受主线程打断，容易造成资源浪费，不应过度使用，且当Worker使用完成后应关闭。

Web Worker使用是需注意：

1. 脚本来源：worker进程中运行的脚本必须来源于网络资源，无法加载本地资源
2. 同源限制：worker进程中运行的脚本须和主进程同源
3. DOM限制：worker进程无法读取当前页面的DOM对象（docmuent）
4. BOM限制：worker进程无使用window对象的alert、confirm方法，但可以获取和使用location、navigator对象，还可以发送异步请求

创建worker：

// 主线程
var worker = new Worker(
	'http://static.domain.com/js/worker.js', // 脚本地址
	{ key: 'value' } // 可传递参数
);

// worker线程
// 使用参数
self.key // 'value'
// 加载其他脚本
self.importScripts(
	'http://static.domain.com/js/worker1.js',
	'http://static.domain.com/js/worker2.js'
);
// 创建其他worker
var worker = new Worker(
	'http://static.domain.com/js/worker3.js', // 脚本地址
);

关闭worker

// 主线程
worker.terminate();

//  worker线程
self.close();

worker线程和主线程不在同一个上下文环境，必须通过消息完成通信：

// 主线程
// 调用postMessage方法向worker线程传递数据
worker.postMessage({ key: 'value' })
// 除了字符串，json对象等格式，worker还可以接收 File、Blob、ArrayBuffer等类型数据
worker.postMessage(new ArrayBuffer(10)); 
// 监听onmessage事件接收worker线程传入的数据
worker.onmessage = function (event){
	console.log(event.data)
}

// worker线程
// 监听onmessage事件 接收 创建当前worker的线程 传入的数据
self.onmessage = function(event){
	console.log(event.data)
}
// 调用postMessage方法 向创建当前worker的线程 传递数据
self.postMessage(['hello', 'world'])

js允许当前线程把数据对象控制权转移给其他线程，转移后当前线程将无法继续使用这些对象，以避免多个线程同时修改数据时产生异常，支持转移的对象类型如ArrayBuffer，MessagePort或ImageBitmap的实例对象：

// 主线程
// 监听onmessage事件接收worker线程传入的数据
worker.addEventListener('message', function (event) {
	console.info('accept ArrayBuffer:' + event.data.title + ' from worker');
});
// 调用postMessage方法传递ArrBuffer到worker线程
var arrBuf = new ArrayBuffer(10);
worker.postMessage({
	title: 'arrBuf',
	arrBuf
},[
 	arrBuf // 将数据对象控制权交给worker线程
]);

// worker 线程
// 监听onmessage事件接收主线程传入的数据
self.onmessage = function (event) {
    console.info('accept ArrayBuffer:' + event.data.title + ' from main');
    // 处理数据..
    // doSomethingWithArrBuff...
    // 调用postMessage方法传递ArrBuffer，并将数据对象控制权交还给主线程
    self.postMessage({title:'do_sendMainArrBuff', arrBuf}, [arrBuf]);
}