Worker基础知识

我们都知道客户端JAVAScript有一个基本的特性就是单线程。这是有一定历史原因的，暂且不深究。随着web应用的越来越复杂，客户端的js可能会承担越来越繁重的计算任务，从而导致UI线程被阻塞无法及时响应用户的操作。

worker的出现，就是来解放主线程的js的计算任务的，由于安全的考虑，worker也会受到一定的限制。

1. 基本知识

在Web Worker标准中，定义了解决客户端JavaScript无法多线程的问题。

1. worker是指执行代码的并行线程。
2. Web Workers处在一个自包含的执行环境，无法访问Window对象和Document对象，
3. 和主线程之间的通信也只能通过异步消息传递机制来实现。
4. 提供一种使用异步API的方式，同时运行书写需要长时间运行的函数而不会带来循环事件和导致浏览器崩溃的问题。
5. Web Workers标准中，有两部分组成Worker对象和WorkerGlobalScope全局对象。

2. Worker对象

1. 使用构造函数Worker()创建Worker对象

var loader = new Worker(url)

1. url:可以采用相对路径和绝对路径，但是采用绝对路径必须和包含该脚本的文档是同源的。
2. 使用postMessage()传递参数给Worker
3. 传递给postMessage()方法的值hi赋值，最终的副本会通过message事件传递给Worker

loader.postMessage('file.txt');

1. 通过message事件来接收Work的响应消息

worker.onmessage = function(e){
 var message = e.data;
 console.log('URL contents: ' + message);
}

1. 使用terminate()终止Worker

worker.onmessage = function(e){
 //接收处理Worker的响应消息
 //终止worker
 worker.terminate();
}

此外，Worker可以通过error事件来处理异常。

worker.onerror = function(e){
 concole.log('Error at ' + e.filename + ':' + e.lineno
 + ':' + e.message);
}

和所有事件目标一样，Worker对象也定义了标准的addEventListener()和removeEventListener()

3. WorkerGlobalScope全局对象

在通过Worker()构造函数创建一个新Worker的时候，指定了包含JavaScript代码文件的URL。该代码会运行在一个全新的JavaScript运行环境中，完全和创建Worker的脚本隔离开来。

WorkerGlobalScope全局对象表示了该新的运行环境，它是新创建的Worker的全局对象。

3.1 与外部Worker的通信

1. postMessage() & message事件

WorkerGlobalScope对象同样有postMessage()方法和message事件，利用这两者可以与外部Worker进行通信

//worker内部
onmessage = function(e){
 postMessage(e.data);
}

2. close()

同样，Worker可以使用close()来关闭自己，但是要注意的是，Worker对象上没有定义任何API用于检测Worker是否已关闭。因此，如果一个Worker要使用close()方法将自己关闭，那么最好是先传递”关闭”的信息。

3. importScripts()

Worker内部使用此方法来加载任何需要的库代码。而是此方法是一个同步的方法，它在直到所有的脚本都已经载入并运行完成才会返回。

//在开始工作前，现在如需要的类、工具函数
importScript('collections/Set.js','utils/base64.js');

3.2 WorkerGlobalScope的属性

它拥有所有核心JavaScript全局对象拥有的属性，同时，还拥有部分客户端Window对象的一些属性。

• self：对全局对象自身的引用
• 计数器方法：setTimeout()/clearTimeout()/setInterval()/clearInterval()
• location：只读
• navigator
• 常用的事件目标方法：addEventListener()和removeEventListener()
• onerror属性

4. 应用场景：脚本化HTTP请求

WorkerGlobalScope对象好包含一些重要的构造函数，其中就有XMLHttpRequest()，以便Worker可以通过它进行脚本化的HTTP请求。

在Worker中发起同步的XmlHttpRequest

//Worker内部
onmessage = function(e){
 var urls = e.data; //要获取的url
 var contents = []; //url指定的内容
 var i,len,url;
 for(i = 0, len = urls.length; i < len; i++){
 var url = urls[i];
 var xhr = new XMLHttpRequest();
 xhr.open('GET',url,false);//false表示进行同步请求
 xhr.send();
 if(xhr.status !== 200){
 throw Error(xhr.status + ' ' + xhr.statusText + ': ' + url);
 }
 contents.push(xhr.responseText);
 }
 //返回url的内容
 postMessage(contents);
}