h5-worker多线程js

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) +"毫秒");

	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
		});
	}	

我们来测试一下效果

• 主线程和子线程通信都是通过postMessage和onmessage两个方法来实现的
• 还需要注意一点，Worker必须在服务器协议下才能使用，file协议会报错