HTML5提供了Worker類用於多線程處理。Worker是在UI主線程中創建，後臺執行的一段js腳本，它通過消息與UI線程傳遞數據。使用Worker就3步：
cheungmine 2011-11-29
第1步：創建一個Worker，需要指定一個js文件，作爲Worker線程的執行體：
var worker = new Worker("worker.js");
第2步：給Worker實例指定消息處理函數，只有2個：onmessage ，onerror
worker.onmessage = function (event) {
// update UI here
var t1 = new Date().getTime();
elemById("_time").value = t1 - t0;
elemById("_piValue").value = event.data;
};
worker.onerror = function (event) {
alert(event.message);
};
第3步：給worker發消息：postMessage。
elemById("_time").value = "-";
t0 = new Date().getTime();
worker.postMessage(parseInt(elemById("_num_rects").value));
下面以一個具體的例子來說明Worker的用法。這個例子是用數值積分的方法求pi=(3.1415926....）的。worker.js就是做這個工作。
- // worker.js
- // calculate pi using numerical integration
- // 2011-11, cheungmine
- self.onmessage = function (event) {
- // numerical integration to calc pi
- var num_rects = event.data;
- var width = 1.0/num_rects;
- var mid;
- var height;
- var sum = 0.0;
- var area;
- for (var i=0; i<num_rects; i++) {
- mid = (i+0.5) * width;
- height = 4.0/(1.0+mid*mid);
- sum += height;
- }
- area = width*sum; // area=pi
- // post message back to UI thread
- self.postMessage(area);
- };
- <!doctype html>
- <html lang="en">
- <head>
- <meta charset="UTF-8">
- <title>js-test.html</title>
- <script type="text/javascript">
- function elemById(id) {
- return document.getElementById(id);
- }
- function getBrowserAgent() {
- var browser = "$";
- if ((navigator.userAgent.indexOf('MSIE') >= 0) &&
- (navigator.userAgent.indexOf('Opera') < 0)){
- browser = "$IE";
- }
- else if (navigator.userAgent.indexOf('Firefox') >= 0){
- browser = "$FIREFOX";
- }
- else if (navigator.userAgent.indexOf('Opera') >= 0){
- browser = "$OPERA";
- }
- else if (navigator.userAgent.indexOf('Chrome') >= 0){
- browser = "$CHROME";
- }
- return browser;
- }
- var browser = getBrowserAgent();
- window.addEventListener('load',
- function () {
- if (browser=="$IE") {
- // MSIE
- if (window.confirm("IE does not support HTML5 currently.\n"+
- "please use lastest FireFox, Chrome or Opera!\n"+
- "if you havenot any of them installed,\n"+
- "please click OK to enter download page.")) {
- window.location.replace("selbrowser.html");
- }
- else {
- window.close();
- }
- }
- else if (browser=="$FIREFOX"||browser=="$CHROME") {
- // do stuff for FireFox and Chrome
- }
- else {
- // do stuff for others
- }
- initPage();
- },
- false
- );
- var dt = new Date();
- var t0 = 0;
- function initPage () {
- // onclick
- elemById("_piWorker").addEventListener('click',
- function(){
- var worker = new Worker("worker.js");
- worker.onmessage = function (event) {
- // update UI here
- var t1 = new Date().getTime();
- elemById("_time").value = t1 - t0;
- elemById("_piValue").value = event.data;
- };
- worker.onerror = function (event) {
- alert(event.message);
- };
- elemById("_time").value = "-";
- t0 = new Date().getTime();
- worker.postMessage(parseInt(elemById("_num_rects").value));
- },
- false
- );
- }
- </script>
- </head>
- <body>
- <p>Press button "calc" to get pi</p>
- <p>
- <input type="input" size="10" id="_num_rects" value="100000000">
- <input type="button" id="_piWorker" value="calc">
- pi=<input type="input" size="30" id="_piValue" value="">
- time elapsed: <input type="input" size="10" id="_time" value="-">
- </p>
- </body>
- </html>
如果用戶不小心用IE打開了主頁面，我們需要提示用戶目前IE還幹不了這個活，下面的是下載支持HTML5的瀏覽器頁面selbrowser.html：
- <html>
- <head>
- <title>selbrowser.html</title>
- </head>
- <body>
- <p><h4>Download the lastest HTML5 browser!</h4></p>
- <table align="center">
- <tr>
- <td width="200"><a href="http://www.mozilla.org/en-US/firefox/all.html"><h3>Mozilla FireFox</h3></a></td>
- <td width="200"><a href="http://www.google.cn/chrome/eula.html?hl=zh-CN&platform=win"><h3>Google Chrome</h3></a></td>
- <td width="200"><a href="http://www.opera.com/download/"><h3>Opera</h3></a></td>
- </table>
- </body>
- </html>
好，全齊了。把上面3個文件放到同一個目錄如：C:/myJSP/test下面：
test/js-test.html
test/worker.js
test/selbrowser.html
使用FireFox直接打開file:///C:/myJSP/test/js-test.html即可。目前FireFox8不支持http://localhost:8080/myJSP/test/js-test.html，會報Could not load domain錯誤。
但是FireFox Aurora支持，只是Worker計算速度超慢。
目前Chrome不支持Worker直接用file:///C:/myJSP/test/js-test.html方式打開，會報Uncaught Error: SECURITY_ERR: DOM Exception 18。
可以使用Chrome以http://localhost:8080/myJSP/test/js-test.html方式打開。需要建一個本地http server，如tomcat。
Opera兩種方式都支持。