JS高级：Web Workers高级（多线程）

最新推荐文章于 2024-05-29 09:33:19 发布

¡Venceremo

最新推荐文章于 2024-05-29 09:33:19 发布

阅读量483

点赞数

分类专栏： JS高级文章标签：前端 javascript 开发语言

本文链接：https://blog.csdn.net/weixin_47295886/article/details/127739940

版权

JS高级专栏收录该内容

37 篇文章 0 订阅

订阅专栏

容易崩计算慢有很多嵌套且占用主线程

function fi(n){
				return n<=2?1:fi(n-1)+fi(n-2);
			}
			console.log(fi(3))

1、H5规范提供了js分线程的实现，取名为Web Workers

这个是多线程解决方案：可以将一些大计算量的代码交由web Worker运行而不冻结用户界面

但是由于子线程完全受主线程控制，且不得操作DOM.所以这个新标准并没有改变JS单线程的本质

2、相关API

Worker:构造函数，加载分线程执行的js文件

Worker.prototype.onmessage：用于接收另一个线程的回调函数

Worker.prototype.postMessage：用于向另一个线程发送消息

3、不足

Worker内代码不能操作DOM(更新UI)

不能跨域加载JS

不是那个浏览器都支持这个新特性

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<input type="text" placeholder="数值" id="number">
		<button id="btn">计算</button>
		<script>
			
			var input=document.getElementById('number');
			document.getElementById('btn').onclick=function(){
				var number=input.value;
				//创建一个Worker对象
				var worker=new Worker('分线程完成的计算.js');
				//绑定接收消息的监听
				worker.onmessage=function(event){
					console.log('主线程接收分线程返回的数据:',event.data)
					alert(event.data)
					
				}
				//向分线程发送消息
				//number是主线程发送给分线程的数据
				worker.postMessage(number)
			}

		</script>
	</body>
</html>

分线程 //这里的全局对象不是window,alert是window的方法

分线程里面没有alert

function fi(n) {
	return n <= 2 ? 1 : fi(n - 1) + fi(n - 2);
}
var onmessage = function(event) {
	var number = event.data;
	console.log('分线程接收到主线程发送的数据：' + number);
	var result=fi(number);
	//result分线程向主线程返回的数据
	postMessage(result)
}

¡Venceremo

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
JS高级：Web Workers高级（多线程）

但是由于子线程完全受主线程控制，且不得操作DOM.所以这个新标准并没有改变JS单线程的本质。Worker.prototype.onmessage：用于接收另一个线程的回调函数。Worker.prototype.postMessage：用于向另一个线程发送消息。分线程 //这里的全局对象不是window,alert是window的方法。1、H5规范提供了js分线程的实现，取名为Web Workers。Worker:构造函数，加载分线程执行的js文件。Worker内代码不能操作DOM(更新UI)
复制链接

扫一扫

专栏目录