web worker

web Worker

web Worker 文件单独写在一个文件中，在main worker 中 执行的文件里使用下面语句启用 web Worker。 如果引用的文件是存在的，则会异步下载，下载完成后，web worker才会开始。如果资源文件加载失败（404），worker 回静默失败（fail sliently）。

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

创建worker 成功后，使用 worker.postMessage() 来启用它。

使用 Message Passing 与 worker 通信

worker 与上层页面（Parent Page）通信基于事件系统和 postMessage方法。该方法接收字符或者JSON对象作为唯一的参数，最近新一代的现代浏览器支持传入JSON对象。需要注意的是JSON对象是被复制传递的，worker 和 parent Page 操作的不是一个实例，可以理解为在接收数据时经历了编码和解码。这个特性同样适用于支持文件，二进制，ArrayBuffer等类型的浏览器。因此当使用postMessage传递较大文件的时候需要注意这个问题。为了解决这个问题可以使用transferObject[Transferring is effectively recreating the object while sharing a reference to the underlying data and then detaching the object being transferred.]它用于传递重型资源的使用权，并不是所有的对象都是适用于使用它。理解为他是引用传递，没有复制的过程，不同与引用传递的是一旦传递了该数据，那么原有的数据会被清空不可以再继续被使用，他的内容被传递到worker的上下文环境中。

main script:

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

worker.addEventListener('message', function(e) {
  console.log('Worker said: ', e.data);
}, false);

worker.postMessage('Hello World'); // Send data to our worker.

worker :

self.addEventListener('message', function(e) {
  self.postMessage(e.data);
}, false);

woker 可用功能

可以的：

• navigator 对象
• location （只读）
• XMLHTTPRequest
• setTimeout()/clearTimeout() and setInterval()/clearInterval()
• Application Cache
• 使用importScripts() 方法加载外部脚本
• Spawning other web workers

不可以的：

• 操作DOM
• window对象
• document 对象
• parent 对象

使用 importScripts

importScripts('script1.js');
importScripts('script2.js');

// or

importScripts('script1.js', 'script2.js');

subWorker

webWorker可以spawn subWorker。这有利于在运行时进一步分解大任务。

警告caveart：

• subWorker 必须与 parent Page 同源
• subWorker 的 URIs 是被解析为相对于 Parent Workers 资源的。
• 由于 worker 之间的通信使用的 copied 方式，使用subWorker时需要注意系统资源的开销。

inline worker

再执行过程中创建一个worker， 或者创建内建页面而不是独立的woker文件。使用 Blob 可以在 main logic 通过创建一个 URL 处理 woker code 。

var blob = new Blob([
    "onmessage = function(e) { postMessage('msg from worker'); }"]);

// Obtain a blob URL reference to our worker 'file'.
var blobURL = window.URL.createObjectURL(blob);

var worker = new Worker(blobURL);
worker.onmessage = function(e) {
  // e.data == 'msg from worker'
};
worker.postMessage(); // Start the worker.

这个巧妙的使用了 window.URL.createObjectURL（），这方法创建了一个可以引用Dom
File or Blob 对象的简单的url 字符串。Blob URL 是唯一的并且持续应用的这个生命周期直到document unload。使用 window.URL.revokeObjectURL 来回收创建的Blob URL()。

这种方式引用外部脚本时，需要使用绝对路径方式来引用，或者在postMessage里传入url，手动解析域名拼合出访问的路径。

错误监听和处理

错误对象的结构：

{
filename：// 文件
lineno：// 错误行数
message：// 错误信息
}

 function onError(e) {
    document.getElementById('error').textContent = [
      'ERROR: Line ', e.lineno, ' in ', e.filename, ': ', e.message
    ].join('');
  }

  function onMsg(e) {
    document.getElementById('result').textContent = e.data;
  }

  var worker = new Worker('workerWithError.js');
  worker.addEventListener('message', onMsg, false);
  worker.addEventListener('error', onError, false);
  worker.postMessage(); // Start worker without a message.

试用场景

• 预加载缓存数据
• 代码高亮或者实时文本格式化
• 拼写检查
• 解析视频或音频数据
• background I/O 或者 webservices 轮询
• 处理大量数组或者JSON响应
• canvas中的图片过滤
• 更新本地数据库多条记录

web Worker