web worker基本使用

前言

js是单线程 即所有任务只能在一个线程中完成。
Web Worker是为js创造多线程环境 
Worker 线程一旦新建成功,就会始终运行,
不会被主线程上的活动(比如用户点击按钮、提交表单)打断。
这样有利于随时响应主线程的通信。但是,这也造成了 Worker 比较耗费资源,
不应该过度使用,而且一旦使用完毕,就应该关闭

基本用法

主线程中new的方式调用Worker()构造函数,
新建一个 Worker 线程并传入线程文件地址
var worker = new Worker('work.js');

通过postMessage向子线程发送数据
通过监听message事件接收子线程发回来的消息
worket.postMessage({name:'jn'})
worker.addEventListener('message',function(e){
	...e.data
})
worker完成任务后 主线程需要将其关闭
worker.terminate();

worker.js:
	子线程中一样的监听message事件 获取信息,
	通过postMessage发送信息
	this.addEventListener('message',function(e){
		...e.data
		
		this.postMessage({result:111})
	})
	
	子线程中可使用self代表当前子线程 
	等同于上面的this
		self.addEventListener('message',function(e){
			...
		})
		
子线程内也可关闭线程 
self.close()

子线程中通过importScripts引入其他脚本
	importScripts('./a.js')

错误监听

主线程中可监听错误事件
worker.addEventListener('error',function(e){
	
})
http://www.ruanyifeng.com/blog/2018/07/web-worker.html
上一篇:iframe向父级传递参数(用postMessage来解决跨域)


下一篇:Web Worker 的内部构造以及 5 种你应当使用它的场景