HTML5的Web Workers
该特性仅支持：FF3.5+、Opera 10.6+、Chrome 3+、Safari 4。
详情请参数（下面的参考链接中都有例子说明）：
https://developer.mozilla.org/En/Using_web_workers
https://developer.mozilla.org/En/DOM/Worker
http://www.whatwg.org/specs/web-workers/current-work/
中文：WEB Workers提升WEB前端脚本JavaScript的处理性能
这里以一个计算加法和乘法为例：
1、创建一个worker
2、worker使用postMessage方法，发送请求，在处理时再通过postMessage返回给消息给创建者，它的onmessage方法会捕获进行处理
3、如果需要kill worker直接使用terminate方法
最终运行的界面 ：
完整html代码
<!DOCTYPE html>
<html>
<head>
<title>HTML5__Web Workers(仅支持FF3.5+、Opera 10.6+、Chrome 3+、Safari 4)</title>
<meta name="generator" content="editplus" />
<meta name="author" content="" />
<meta name="keywords" content="" />
<meta name="description" content="" />
<meta http-equiv="content-type" content="text/html;charset=utf-8">
<link rel="stylesheet" type="text/css" href="http://www.codediesel.com/demos/workers/view.css" />
</head>
<body id="main_body">
<img id="top" src="http://www.codediesel.com/demos/workers/top.png" alt="">
<div id="form_container">
<h1><a>Untitled Form</a></h1>
<form id="main" class="appnitro" method="post" action="">
<div class="form_description">
<h2 id="title"></h2>
</div>
<ul >
<li id="li_2" >
<label class="description" for="element_2">X </label>
<div>
<input id="x" name="x" class="element text medium" type="text" maxlength="255" value="3"/>
</div>
</li>
<li id="li_3" >
<label class="description" for="element_3">Y </label>
<div>
<input id="y" name="y" class="element text medium" type="text" maxlength="255" value="3"/>
</div>
</li>
<li id="li_1" >
<label class="description" for="element_1">Messages </label>
<div>
<textarea id="output" name="output" class="element textarea medium"></textarea>
</div>
</li>
<li class="buttons">
<input type="hidden" name="form_id" value="87137" />
<input id="addButton" class="button_text" type="button" value="Add" />
<input id="multButton" class="button_text" type="button" value="Multiply" />
<input id="killButton" class="button_text" type="button" value="Stop Worker" />
<input id="clearBtn" class="button_text" type="button" value="Clear" />
</li>
</ul>
</form>
<div id="footer"></div>
</div>
<img id="bottom" src="http://www.codediesel.com/demos/workers/bottom.png" alt="">
<script type='text/javascript'>1:2:3: !(function() {4:5:6: var getWebWorkerSupport = function() {7: return (typeof(Worker) !== "undefined") ? true:false;8: }9:10: var getElem = function(id) {11: return typeof id === 'string' ? document.getElementById(id) : id;12: }13:14: var worker,15: isSupport = getWebWorkerSupport();16:17:18: if (isSupport) {19:20: var createWorker = function() {21: if (worker) {22: return ;23: }24:25: worker = new Worker("worker.js");26: worker.onmessage = function(evt) {27: getElem("output").value += evt.data + '\n';28: }29: worker.onerror = function(evt) {30: getElem("output").value += "\n在第["+ evt.lineno +"]行发生错误: " + evt.message;31: }32: }33:34: getElem("multButton").onclick = function() {35: createWorker();36:37: var x = document.getElementById("x").value;38: var y = parseFloat(document.getElementById("y").value);39:40: var str = "mult_" + x + "_" + y;41:42: worker.postMessage(str);43: }44:45: getElem("addButton").onclick = function() {46: createWorker();47:48: var x = document.getElementById("x").value;49: var y = parseFloat(document.getElementById("y").value);50:51: var str = "add_" + x + "_" + y;52: worker.postMessage(str);53: }54:55: getElem("killButton").onclick = function() {56: if (worker) {57: worker.terminate();58: worker = null;59: }60: }61: } else {62: getElem("multButton").disabled = getElem("addButton").disabled = getElem("killButton").disabled = true;63: }64:65: getElem("title").innerHTML = "您当前使用的浏览器"+(isSupport ? "支持" : "<em class='error'>不支持</em>")+"Web Worker";66:67: getElem("clearBtn").onclick = function() {68: getElem("output").value = "";69: }70: })();</script>
</body>
</html>
worker.js的代码：
unction addNumbers(x,y) {
return x + y;
unction mulNumbers(x,y) {
return x*y;
his.onmessage = function (event) {
var msg = event.data,
arr = msg.split("_"),
op = arr[0],
x = (arr[1] || "")|0,
y = (arr[2] || "")|0;
switch(op) {
case 'mult':
postMessage( x + "*" + y + "=" + mulNumbers(x, y));
break;
case 'add':
postMessage( x + "+" + y + "=" + addNumbers(x, y));
break;
default:
postMessage("Wrong operation specified");
}
var i = 1;
while (i < 1000*1000*1000) {
if (i % 500000 === 0) {
postMessage(i);
}
i++;
}
;
本章参考自：http://www.codediesel.com/demos/workers/ (有部分修改)
