HTML5 Web Workers
Web workers 是什么
Web workers 是HTML5标准的一部分， 这一规范定义了一套API，它允许一段JavaScript程序运行在主线程以外的另外一个线程中。Web Workers 规范中定义了两类工作线程，分别是专用线程Dediacted worker 和共享线程 Shared Worker， 其中, Dedicated Woker 只能为一个页面所使用，而Shared Worker 则可以被多个页面所共享，本文示例为专用线程Dedicated Worker.
一个小例子
下载地址：https://github.com/mdn/simple-web-worker
index.html
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <meta name="viewport" content="width=device-width"> <title>Web Workers basic example</title> <link rel="stylesheet" href="style.css"> <!--[if lt IE 9]> <script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script> <![endif]--> </head> <body> <h1>Web<br>Workers<br>basic<br>example</h1> <div class="controls" tabindex="0"> <form> <div> <label for="number1">Multiply number 1: </label> <input type="text" id="number1" value="0"> </div> <div> <label for="number2">Multiply number 2: </label> <input type="text" id="number2" value="0"> </div> </form> <p class="result">Result: 0</p> </div> </body> <script src="main.js"></script> </html>
main.js
var first = document.querySelector('#number1');
var second = document.querySelector('#number2');
var result = document.querySelector('.result');
if (window.Worker) { // Check if Browser supports the Worker api.
// Requries script name as input
var myWorker = new Worker("worker.js");
// onkeyup could be used instead of onchange if you wanted to update the answer every time
// an entered value is changed, and you don't want to have to unfocus the field to update its .value
first.onchange = function() {
myWorker.postMessage([first.value,second.value]); // Sending message as an array to the worker
console.log('Message posted to worker');
};
second.onchange = function() {
myWorker.postMessage([first.value,second.value]);
console.log('Message posted to worker');
};
myWorker.onmessage = function(e) {
result.textContent = e.data;
console.log('Message received from 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);
}
简单小结：
Web主线程：
1.通过 var worker = new worker(url)加载一个js文件来创建一个worker, 同时返回一个worker实例。
2. 通过 worker.postMessage(data) 方法来向worker发送数据。
3. 绑定 worker.onmessage方法来接收worker发送过来的数据。
4. 可以使用 worker.terminate()来终止一个worker的执行。
worker新线程：
1. 绑定onmessage方法来接收主线程发送过来的数据。
2.通过postMessage(data)方法来向主线程发送数据。
3.可以使用self.close()来终止一个worker的执行。
API 进阶
关于 web workers， 最重要的是要知道它执行的javascript代码完全在另一个作用域中，与当前网页中的代码不共享作用域。在web workers中，同样有一个全局对象(woker对象本身，this和self 引用的都是worker对象本身)和其他对象以及方法。
Web worker中的代码不能访问Dom.
在worker线程中，可以获得下列对象
1 .navigator对象
2. location对象，只读
3. XMLhtttpRequest独享
4. setTimeout/setInterval方法
5. Application Cache
6. 通过importScripts()方法加载其他脚本
7. 创建新的Web Worker
worker线程不能获得下列对象:
1. DOM对象
2. window对象
3. document对象
4. parent对象
上述的规范，限制了在worker线程中获得主线程页面相关对象的能力，所以在worker线程中，不能进行dom元素的更新。
Web workers带来了什么
1. Web workers 带来后台计算能力
Web workers 自身是由webkit多线程实现，但他并没有为javascript语言带来多线程编程特性，我们现在仍然不能在javascript代码中创建并管理一个线程，或者主动控制线程间的同步与锁等特性。
Web workers典型应用场景
既然Web workers 为浏览器端javascript带来了后台计算能力，我们可以利用这一能力，将更新数据和对象状态的耗时部分交由Web workers执行，提升页面性能。
部分典型的应用场景如下：
1. 使用专用线程进行数学运算
Web workers 最简单的应用就是用来做后台计算，而这种计算并不会中断前台用户的操作。
2. 图像处理
通过使用<canvas>或者<video>元素中获取的数据，可以把图像分割成几个不同的区域并且把它们推送给并行的不同workers来做计算。
3. 大量数据的检索
但需要在调用ajax后处理大量的数据，如果处理这些数据所需的时间长短非常重要，可以在Web workers中来做这些，避免冻结UI线程。
4. 背景数据分析
由于在使用 Web Workers的时候，我们有更多潜在的CPU可用时间，我们现在可以考虑一下javascript中的新应用场景。
例如, 我们可以想象在不影响UI体验的情况下实时处理用户输入。利用这样一种可能，我们可以想象一个像word一样的应用：当用户打字时，后台在词典中进行查找，帮助用户自动纠错等等。
参考文章：
https://developer.mozilla.org/en-US/docs/Web/API/Worker
http://www.ibm.com/developerworks/cn/web/1112_sunch_webworker/index.html
http://www.tools138.com/create/article/20151111/020119942.html