web-worker初探

[ronghaoZHI]

html5之 web worker

使用场景
1、数学运算
Web Worker最简单的应用就是用来做后台计算，对CPU密集型的场景再适合不过了。
2、图像处理
通过使用从 canvas 中获取的数据，可以把图像分割成几个不同的区域并且把它们推送给并行的不同Workers来做计算，对图像进行像素级的处理，再把处理完成的图像数据返回给主页面。
3、大数据的处理
目前mvvm框架越来越普及，基于数据驱动的开发模式也越愈发流行，未来大数据的处理也可能转向到前台，这时，将大数据的处理交给在Web Worker也是上上之策了吧。

---

简介：

1 生成一个专用worker

创建一个新的worker很简单。你需要做的是调用Worker() 的构造器，指定一个脚本的URI来执行worker线程（main.js）：

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

2 专用worker中消息的接收和发送

workers通过postMessage() 方法和onmessage事件处理函数生效。向一个worker发送消息需要这样做（main.js）

first.onchange = function() {
  myWorker.postMessage([first.value,second.value]);
  console.log('Message posted to worker');
}

second.onchange = function() {
  myWorker.postMessage([first.value,second.value]);
  console.log('Message posted to worker');
}

在worker中接收到消息后，我们可以写这样一个事件处理函数代码作为响应（worker.js）：

onmessage = function(e) {
  console.log('Message received from main script');
  var workerResult = 'Result: ' + (e.data[0] * e.data[1]);
  console.log('Posting message back to main script');
  postMessage(workerResult);
}

onmessage处理函数允许在任何时刻，一旦接收到消息就可以执行一些代码，代码中消息本身作为事件的data属性进行使用。

回到主线程，我们再次使用onmessage以响应worker回传的消息：

myWorker.onmessage = function(e) {
  result.textContent = e.data;
  console.log('Message received from worker');
}

终止worker

如果需要从主线程中立刻终止一个运行中的worker，可以调用worker的terminate 方法：

myWorker.terminate();

而在worker线程中，workers 也可以调用自己的 close 方法进行关闭：

close();

---

创建内嵌的worker

var myTask = `
    var i = 0;
    function timedCount(){
        i +=1;
        postMessage(i);
        setTimeout(timedCount, 1000);
    }
    timedCount();
`;

var blob = new Blob([myTask]);
var myWorker = new Worker(window.URL.createObjectURL(blob));

像使用Promise 一样使用 web-worker

可参考 https://github.com/israelss/simple-web-worker/tree/master/src