Web Worker初步学习

Web Worker是H5的新特性之一，但用的比较少。其特性是在Javascript单线程执行的基础上，开启一个子线程。子程序可以和主线程相互收发数据，但是不影响主线程。且子线程不能操作页面的dom，不能通过任何方式影响页面的外观。

一、写法

1. 主线程创造一个新的worker，即子线程

var worker = new Worker("./worker.js");

2. 传递参数/数据

worker.postMessage(data);

3. 接收数据

worker.onmessage= function(event) {
	//数据保存在event.data中
	var data = event.data;
}

4. 异常处理

worker.onerror = function(e){
	 console.log(e); 
}

5. 结束Worker

worker.terminate();

二、实例

index.html

worker.js

//子线程对主线程返回的数组进行排序后返回
onmessage = function(event) {
	//来自Worker的数组，保存在event.data中
	var data = event.data;

	console.log('接收主线程的数组，排序前');
	console.log(data);

	//使用默认的sort()方法，比较字符串排序
	data.sort(function(a, b){
		return a - b;
	});

	//把处理好的数据传递给主线程
	postMessage(data);
}

执行效果

注：如果在chrome浏览器中直接运行含Worker的本地的html文件，可能会报错，解决办法是可以电脑搭建本地服务器，然后通过本地服务器访问，要不然就用其他浏览器，比如火狐。

三、WorkerGlobalScope

worker.js执行的上下文，与主页面html执行时的上下文并不相同，最顶层的对象并不是window，woker.js执行的全局上下文，是个叫做WorkerGlobalScope的东东，所以无法访问window、与window相关的DOM API，但是可以与setTimeout、setInterval等协作。
WorkerGlobalScope作用域下的常用属性、方法如下：

1、self

　　我们可以使用 WorkerGlobalScope 的 self 属性来或者这个对象本身的引用

2、location

　　location 属性返回当线程被创建出来的时候与之关联的 WorkerLocation 对象，它表示用于初始化这个工作线程的脚步资源的绝对 URL，即使页面被多次重定向后，这个 URL 资源位置也不会改变。

3、close

　　关闭当前线程，与terminate作用类似

4、importScripts

　　我们可以通过importScripts()方法通过url在worker中加载库函数

5、XMLHttpRequest

　　有了它，才能发出Ajax请求

6、setTimeout/setInterval以及addEventListener/postMessage