HTML5帶來了許多的改變，除了標記語意上的增強之外，最令人震撼的莫過於它所附屬的Javascript APIs。而 Web Workers 是 HTML5 提供的一個多執行緒(Multi-Thread)的解決方案，讓我們可以把需要大量運算的程式交由Web Workers去做背景執行，如此的好處就是其他的工作仍可以順利進行。
Web Workes 目前支援的瀏覽器有：Firefox 3.5+ / Safari 4.0+ / Chrome 5.0+
HTML5 的不同
標記的不同
HTML5在標記上有著相當大的變化，其中最為明顯的即是語意上的標籤，在HTML5中，結構化網頁的語意更加清晰了，除了移除許多不必要的標記之外也增加了許多標記及有用的屬性，本文只簡述範例中會用到的部份。
若想知道自己編寫的HTML5是否有錯誤可以利用HTML5 validator來驗證。
DOCTYPE 變簡潔了
現在DOCTYPE只需簡短的這樣寫：
<!DOCTYPE html>
標籤不一定要閉合
在XHTML裡標籤必須要閉合，例如：
<input type="text" id="name" />
而在HTML5中，以下的寫法也是正確的，而這也是比較建議的寫法：
<input type="text" id="name">
同樣的方法也適用於meta，而且在指定content-type時，也只需要指定charset而不必定義文件類型text/html，例如：
<meta charset="UTF-8">
Web Workers基本概念
在使用Web Workers時，我們必須建立一個Worker實體，並傳入要被呼叫的Javascript檔案所在URL，而我們必須把Worker要跑的程式寫在這個檔案中，例如：
var worker = new Worker("worker.js");
在worker.js中我們必須綁定onmessage來執行我們想要執行的動作，在這裡我們可以使用postMessage()來觸發Worker.onmessage事件，例如：
onmessage = function (evt) {
for (var i=0; i<100000000; i++) {
//執行大量迴圈
postMessage(i); // 觸發 Worker.onmessage() 並傳入 i
};
};
Worker.onmessage(event) 事件
當在被呼叫的javascript裡呼叫postMessage()時，將會觸發這個事件，在這個事件中我們可以透過event.data來取得傳入資料。
worker.onmessage = function (e){
// 由於在 worker.js 中使用了 postMessage() 並傳入 i 值
// 因此在這裡可以使用 event.data 來取得 i 值，並做出相關處理
// 例如：
console.log(e.data);
}
Worker.onerror(event) 事件
當呼叫失敗時，將會觸發此事件，在這個事件中我們可以透過event來取得事件相關資訊。
worker.onerror = function(e){
alert("於第["+ e.lineno +"]行發生錯誤 : " + e.message); //顯示錯誤訊息
}
Worker.terminate()
用以停止Worker的執行的成員函數。
因此Web Worker簡單的操作流程圖如下：
搭配jQuery的簡單Web Worker範例
worker.html
<!doctype html> <html> <head> <meta charset="UTF-8"> <title>Worker Test</title> <link rel="stylesheet" href="worker.css" type="text/css" media="screen"> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.js"></script> <script src="init.js"></script> </head> <body> <a href="#" id="startWorker">開始</a> <ul id="worker-list"></ul> <a href="#">回文章</a> </body> </html>
worker.css
#worker-list {
list-style-type: none;
width: 400px;
}
#worker-list li {
background-color: #FFE;
margin: 3px;
padding: 3px;
border: 1px solid #C6BC9F;
font-size: 16px;
position: relative;
}
#worker-list .close {
position: absolute;
background-color: #FFF;
display: block;
height: 18px;
width: 18px;
border: 1px solid #CCC;
text-align: center;
vertical-align: middle;
font-size: 12px;
cursor:pointer;
font-family: Arial, Helvetica, sans-serif;
right: 3px;
top: 3px;
}
worker.js
onmessage = function (e) {
for (var i=0; i<e.data; i++) {
//觸發 worker.onmessage 傳入 i
if(0 === i % 10 ) postMessage(i);
};
};
init.js
$(function(){
function createWorker (msgObj) {
// 建立 worker
var worker = new Worker("worker.js");
worker.onmessage = function (e){
msgObj.html(e.data); // 更新資訊 (e.data可取得觸發傳入值)
}
worker.onerror = function(e){
alert("於第["+ e.lineno +"]行發生錯誤 : " + e.message); //顯示錯誤訊息
}
return worker;
}
$("#startWorker").click(function(){
for(var i=0;i<5;i++){
addworker();
}
$(this).remove();
return false;
});
function addworker(){
var newItem = $('<li />');
var msg = $('<span class="message">Waitting...</span>');
//關閉鈕
var close = $('<span class="close">X</span>').click(function(){
var li = $(this).closest('li');
li.data('worker').terminate(); //停止worker的執行
li.remove();
});;
var worker = createWorker (msg);
//儲存Worker在元素裡
newItem.data('worker',worker);
//執行Worker
worker.postMessage(30000);
$('#worker-list').append(newItem.append(msg).append(close))
}
});
四月 29, 2010 at 4:53 下午
[...] 開始HTML5 – Web Workers [...]
一月 30, 2011 at 10:05 上午
[...] 中文教程：開始HTML5 – Web Workers [...]
七月 6, 2011 at 4:45 下午
你好
在下用html5寫了一各程式
用來偵測iPHONE sensor的數值
請要要如何才可以讓此網頁在ios背景持續執行呢?
謝謝
七月 13, 2011 at 9:01 上午
[...] 中文教程：開始HTML5 – Web Workers [...]
九月 29, 2011 at 3:05 下午
[...] 中文教程：開始HTML5 – Web Workers [...]
十一月 15, 2011 at 12:55 下午
[...] 中文教程：開始HTML5 – Web Workers [...]