Web Worker初步学习

布满荆棘的人生 2022-05-16 09:54 245阅读 0赞

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

执行效果

![70][]

注：如果在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

[70]: /images/20220516/ec0d4570c0924b23b1083dedc29ea355.png