該特性僅支持: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/ (有部分修改)