笔记/Web Worker 使用教程

由于JS的单线程，一次只能做一件事，后面的等后面的做完的性质存在，在面对多核CPU出现以后，单线程会带来许多不便。

webWorker 为JS创建多线程环境。

允许主线程创建worker线程，一些任务交给他处理。主线程与worker互不干扰，worker处于后台，workder完成后将结果交给主线程，主线程就会很流畅。

worker一旦创建成功，就始终运行，不会被主线程上的活动打断，有利于随时相应同时也带来了资源消耗，应该要做到使用完毕就关闭。

webworker注意点：
同源限制
DOM限制无法读取主线程的dom,document,window,parent,可以使用location,navigator
不在同一个上下文环境，需要通过通信联系
脚本限制不能用alert,confirm,可以用ajax
文件限制不能开本地只能是来自网络

主线程new
var worker = new Worker('work.js');

worker线程需要执行的任务，该JS，需要从网络上下载的脚本

worker.postMessage('Hello World');
worker.postMessage({method: 'echo', args: ['Work']});

可以向其发消息

通过worker.onmessage监听子线程发回来的消息。
worker.onmessage = function (event) {
console.log('Received message ' + event.data);
doSomething();
}

扫描二维码关注公众号，回复： 5399873 查看本文章

function doSomething() {
// 执行任务
worker.postMessage('Work done!');
}

worker线程内部一个监听函数，self代表子线程本身。
self.addEventListener('message', function (e) {
self.postMessage('You said: ' + e.data);
}, false);

self.close
workder内部关闭自身。

worker监听是否发生错误
worker.onerror(function (event) {
console.log([
'ERROR: Line ', e.lineno, ' in ', e.filename, ': ', e.message
].join(''));
});

// 或者
worker.addEventListener('error', function (event) {
// ...
});

worker和主线程的通信是拷贝关系。
worker修改不会影响主线程.

Transferable Objects 使得主线程可以快速把数据交给worker.