h5-worker多线程js

envoke

发布于 2020-09-17 11:28:36

1.4K0

发布于 2020-09-17 11:28:36

文章被收录于专栏：我们一无所有，我们巍然矗立我们一无所有，我们巍然矗立

h5-worker多线程js

- - worker阐述

worker阐述

在我们的印象当中，js都是单线程的，或者更多的是类似ajax这种异步加载的伪多线程（这里的伪多线程指的ajax发送请求，采用回调的方法，回调成功以后还是在主线程的队列中去执行回调）

h5提供的worker构造器提供的是另外一个线程，也就是另外的一个队列，真正的达到多线程的情况。

经过刚才的描述，有木有觉得这是一个很牛逼的东西，然而，暂时来说，毫无卵用。

先看看worker有那些缺点

worker不能操作dom（一棒子打死的节奏）
没有window对象（也很坑了）
不能读取文件
兼容性不好

那总有使用的地方把

可以发送ajax（ajax本来就是异步，也不用worker来搞）
做一些复杂的计算

我们来看一个使用worker优化计算的案例这是常规情况下的

	var beginTime = Date.now();
	console.log("====================");
	console.log("====================");
	var a = 999999;
	var result = 0;
	for(var i = 0; i < a; i++){
		result += i;
	}
	console.log(result);
	console.log("====================");
	console.log("====================");
	var endTime = Date.now();
	console.log("总共用时：" + (endTime - startTime) +"毫秒");

再来看看使用worker的情况下

	var beginTime = Date.now();
	console.log("====================");
	console.log("====================");
	var a = 999999;
	var worker = new Worker("./worker.js");
	//发送数据
	worker.postMessage({
		num: a
	});
	//接收worker的返回的数据
	worker.onmessage = function(e){
		console.log(e.data.result);
	}
	console.log("====================");
	console.log("====================");
	var endTime = Date.now();
	console.log("总共用时：" + (endTime - startTime) +"毫秒");

新建worker.js

	//接收主线程发送过来的数据
	this.onmessage = function(e){
		var result = 0;
		//主线程发送过来的对象中的属性值
		var num = e.data.num;
		for(var i = 0; i < num; i++){
			result += i;
		}
		//往主线程中发送数据
		this.postMessage({
			result: result
		});
	}

我们来测试一下效果