html5中Webworkers的工作原理

1.什么是worker

      它是js的一个单线程。通过Web Workers，你可以创建一个不会影响前台处理的后台线程，并且在这个后台线程中创建多个子线程。通过它，你可以将耗时较长的处理交给后台线程去执行，从而解决了之前因为某个耗时过长而跳出的一个提示用户脚本运行时间过长，导致用户不得不结束这个处理的尴尬局面，同时，也给程序员带来了一定的麻烦，因为我们不知道到底是javascript脚本程序出现问题，还是运算时间过长导致的问题，很纠结。

接下来我们一起看看html5webworkersAPI的使用-->

2.workerAPI的使用

      在讲wokers之前，我们先看一看没有使用workers的一段运算代码页面所用的时间。

console.time('1');
var sum = 0;
for(var i = 0;i < 10000000;i++){
	sum += i;
}
console.log(sum);
console.timeEnd('1');

那使用了workers的页面代码会怎样呢？我们先看一看如何使用webworkers

①创建worker对象，里面参数传入的是线程运算的js执行文件（这个不是普通的js文件，后面会讲）

var w = new Worker('worker.js');

②将需要运算的数据通过postMessage的方式传给worker线程文件去计算。

w.postMessage(10000000);

③监听worker传递过来的运算结果的这么一个事件（message事件）。

w.onmessage = function(ev){
	console.log(ev.data);	
};

再来看一下workerjs执行文件，workerjs执行文件也是需要监听message事件的，然后将结果传递给发送数据的页面。其中workerjs当中的self表示的是worker对象，为什么不用w呢？原因需要看后面的注意点，现在只要记住就行。

self.onmessage = function(ev){

	var sum = 0;
	for(var i = 0;i < ev.data;i++){
		sum += i;
	}
	self.postMessage(sum);	
	
}

如果workerjs执行文件需要调用另一个workerjs文件，那么就需要进行以下的操作，导入。

importScripts(‘导入其他JS文件’)

那我们一起来看看使用了worker的页面所花费的时间。明显的使用时间缩短了。

3.webworkers注意点

             刚才前面也讲过，workerjs文件不是普通的js文件，那它和普通的js文件有什么区别呢？普通的js文件是能够进行大量的DOM操作的，而workerjs文件是不能进行大量DOM操作，只能使用ECMscript规定的一些基本语法以及规定的一些操作。如下操作：

• navgator  :  ppVersion 、 userAgent 、 platform

• location  :   所有 属 appName 、 a 性 都是只读的

• self  :  指向全局 worker 对象

• 所有的 ECMA 对象， Object 、 Array 、 Date 等

• XMLHttpRequest 构造器

• setTimeout 和 setInterval 方法

• close() 方法，立刻停止 worker 运行

• importScripts 方法