原文地址:http://www.ruanyifeng.com/blog/2018/07/web-worker.html
由于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();
}
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.