webWorker - JS | Web blog = 杜明清的个人博客 = 👻欢迎一起交流学习👻

#引言
首先我们知道 JS 中是没有并行，并发等概念的，这是因为 JS 是一门单线程的语言，其中的异步执行也是利用事件循环机制进行的，并不是严格意义上的异步。由于 JS 单线程的特性，使得 JS 在执行时如果遇到大量的任务就会使得过程运行缓慢。主渲染线程的延迟明显，使得用户体验较差.

#web-worker
web-worker 的作用就是用来缓解这一问题的

利用 web-worker, 我们可以利用浏览器新开辟一个进程，将需要大量执行的过程在这个进程中执行，然后将结果返回给我们的主进程即可.

#使用示例
#worker.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.p{
line-break: unset;
}
</style>
<a id="link"></a>
<p class="p">
<%= sjdfl =%>
</p>
</head>
<body>
<script>
const \u4e2d\u6587 = ' 这是转义之后的字符 ';
// 使用 webworker, 分担主线程的压力
//const worker = new Worker ()
// 创建一个 worker
const worker = new Worker('./worker.js')
console.log(worker);
worker.postMessage('sdfj');
worker.postMessage({method:'echo',argus:[1,2,3,4]})
// 主线程关闭 worker
setTimeout(()=>{
worker.terminate()
// worker.postMessage('close')
},1000)
worker.addEventListener('message',(e)=>{
console.log(e.data);
})
/**

主线程监听 worker 错误
/
worker.onerror=(e)=>{
worker.terminate()
console.error ('worker 错误 ');
}
/*
直接转移数据的控制权
/
// 创建 4 字节的缓冲区
let abfer = new ArrayBuffer (4);
// 创建 32 位整数数组作为视图，引用缓冲区
let tes = new Int32Array (abfer);
console.log(tes,'ArrayBuffer');
worker.postMessage (abfer,[abfer]); // 转交控制权，主线程不再存储
/*
模拟文件下载功能
/
const blob = new Blob ([' 文件下载 ']);
const link = document.getElementById('link');
link.href = window.URL.createObjectURL(blob);;
link.download = ' 测试文件.txt';
setTimeout(()=>{
// link.click();
},2000)
/*
创建 worker 线程加载 js 文件
！！必须指定 script 标签的 type 为浏览器不知道的类型
/
// const blob1 = new Blob(document.getElementById('scriptDom').textContent);
// const url1 = new window.URL.createObjectURL(blob1);
// const worker2 = new Worker(url1);
/*
使用 worker 线程，完成轮询
*/
// 创建 worker
function createWorker(f){
const fnBlob = new Blob(['('+f.toString()+')()'])
const fnUrl = window.URL.createObjectURL(fnBlob);
return new Worker(fnUrl);
}
const fnWorker = createWorker((e)=>{
let cache;
// setInterval(()=>{
fetch('/data').then(res=>{
if(cache != res){
console.log (' 变化了 ');
}
})
// },1000)
});
</script>
<script id="scriptDom" type="app/worker">
console.log (' 我是被 woeker 加载的文件 ');
</script>
</body>
</html>

	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
	<style>
	.p{
	line-break: unset;
	}
	</style>
	<a id="link"></a>
	<p class="p">
	<%= sjdfl =%>
	</p>
	</head>
	<body>
	<script>
	const \u4e2d\u6587 = '这是转义之后的字符';
	// 使用 webworker, 分担主线程的压力
	// const worker = new Worker()
	// 创建一个 worker
	const worker = new Worker('./worker.js')
	console.log(worker);
	worker.postMessage('sdfj');
	worker.postMessage({method:'echo',argus:[1,2,3,4]})
	// 主线程关闭 worker
	setTimeout(()=>{
	worker.terminate()
	// worker.postMessage('close')
	},1000)
	worker.addEventListener('message',(e)=>{
	console.log(e.data);
	})
	/**
	* 主线程监听 worker 错误
	*/
	worker.onerror=(e)=>{
	worker.terminate()
	console.error('worker错误');
	}
	/**
	* 直接转移数据的控制权
	*/
	// 创建 4 字节的缓冲区
	let abfer = new ArrayBuffer(4);
	// 创建 32 位整数数组作为视图，引用缓冲区
	let tes = new Int32Array(abfer);
	console.log(tes,'ArrayBuffer');
	worker.postMessage(abfer,[abfer]); // 转交控制权，主线程不再存储
	/**
	* 模拟文件下载功能
	*/
	const blob = new Blob(['文件下载']);
	const link = document.getElementById('link');
	link.href = window.URL.createObjectURL(blob);;
	link.download = '测试文件.txt';
	setTimeout(()=>{
	// link.click();
	},2000)
	/**
	* 创建 worker 线程加载 js 文件
	* ！！必须指定 script 标签的 type 为浏览器不知道的类型
	*/
	// const blob1 = new Blob(document.getElementById('scriptDom').textContent);
	// const url1 = new window.URL.createObjectURL(blob1);
	// const worker2 = new Worker(url1);
	/**
	* 使用 worker 线程，完成轮询
	*/
	// 创建 worker
	function createWorker(f){
	const fnBlob = new Blob(['('+f.toString()+')()'])
	const fnUrl = window.URL.createObjectURL(fnBlob);
	return new Worker(fnUrl);
	}
	const fnWorker = createWorker((e)=>{
	let cache;
	// setInterval(()=>{
	fetch('/data').then(res=>{
	if(cache != res){
	console.log('变化了');
	}
	})
	// },1000)
	});
	</script>
	<script id="scriptDom" type="app/worker">
	console.log('我是被woeker加载的文件');
	</script>
	</body>
	</html>

#worker.js

	// 接受数据
	console.log(self);
	self.addEventListener('message',(e)=>{
	console.log(e.data);
	self.postMessage('我接受到了你的消息')
	if(e.data === 'close'){
	self.postMessage('听你的我关闭');
	self.close();
	}
	},false)
	// self.addEventListener('close',(e)=>{
	// console.log (' 关闭 ');
	// })
	/**
	* worker 内部加载脚本
	* 只能加载，不能获取其中内容
	*/
	importScripts('./main.js');

#serviceWorker.js

	//serviceWorker 是基于事件驱动的。
	//serviceWorker 安装事件
	self.addEventListener('install',event=>{
	console.log(event,'安装事件');
	event.waitUntil(()=>{
	console.info('安装完成');
	})
	})
	//serviceWorker 激活事件（当安装完成之后就开始激活）
	self.addEventListener('active',(event)=>{
	let cacheWhiteList = ['product-v2'];
	event.waitUntil(
	caches.keys().then(cacheNames=>{
	return Promise.all(
	cacheNames.map(cacheName=>{
	if(cacheWhiteList.indexOf(cacheName) === -1){
	return caches.delete(cacheName);
	}
	})
	)
	})
	)
	})
	//serviceWorker 与网页的通信
	self.addEventListener('active',(event)=>{
	event.waitUntil(
	self.clients.matchAll().then((client)=>{
	client.postMessage({
	msg:"Hello serviceWorker",
	source:"serviceWorker"
	})
	})
	)
	})

JS webWorker

正则理念

版本管理