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

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title></title>
</head>
<body>
	<script>
		window.onload = function() {
			var worker = new Worker("./worker.js");

			//排序耗时，会影响加载性能，可以交给子线程处理
			var data = [9, 0, 33, 12, 98, 10, 6, 55];

		    //把数组发送给worker排序
			worker.postMessage(data);

			//接收返回来的排序后的数组
			worker.onmessage = function(e){
				console.log('子线程返回排序好的数组，排序后：');
				console.log(e.data);
			}

			worker.onerror = function(e){
				//因为如果worker如果发生错误，也是悄无声息的，所以要用onerror记录异常
				console.log(e.filename); //发生错误的文件名
				console.log(e.lineno); //发生错误的代码行号
				console.log(e.message); //完整的错误信息
			}

			worker.terminate(); //结束worker
		};
	</script>
</body>
</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

一、写法

二、实例

三、WorkerGlobalScope

猜你喜欢