突襲HTML5之Javascript API擴充1—Web Worker非同步執行及相關概述_html5教學技巧

Javascript執行機制
在HTML5之前，瀏覽器中JavaScript的運作都是以單執行緒的方式運作的，雖然有多種方式實作了對多執行緒的模擬（例如：Javascript 中的setinterval 方法，setTimeout 方法等），但是本質上程式的運作仍然是由JavaScript 引擎以單執行緒調度的方式進行的。在 HTML5 中引入的工作線程使得瀏覽器端的 Javascript 引擎可以並發地執行 Javascript 程式碼，從而實現了對瀏覽器端多執行緒程式設計的良好支援。

Javascript中的多執行緒 - WebWorker
HTML5 中的 Web Worker 可以分為兩種不同執行緒類型，一個是專用執行緒 Dedicated Worker，一個是共享執行緒 Shared Worker。兩種類型的線程各有不同的用途。
專用型web worker
專用型worker與創建它的腳本連接在一起，它可以與其他的worker或是瀏覽器組件通信，但是他不能與DOM通信。專用的含義，我想就是這個線程一次只處理一個需求。專用線程在除了IE外的各種主流瀏覽器中都實現了，可以放心使用。
建立執行緒
建立worker很簡單，只要把需要在執行緒執行的JavaScript檔案的檔案名稱傳給建構子就可以了。
執行緒通訊
在主執行緒與子執行緒間進行通信，使用的是執行緒物件的postMessage和onmessage方法。不管是誰向誰發送數據，發送使用的都是postMessage方法，接收方都是使用onmessage方法接收數據。 postMessage只有一個參數，那就是傳遞的數據，onmessage也只有一個參數，假設為event，則透過event.data取得收到的數據。
發送JSON資料
JSON是JS原生支援的東西，不用白不用，複雜的資料就用JSON傳送吧。例如：

複製程式碼

程式碼如下:

postMessage({'cmd': 'init', 'timestamp': Date.now()});

處理錯誤
當執行緒發生錯誤的時候，它的onerror事件回呼會被調用。所以處理錯誤的方式很簡單，就是掛接執行緒實例的onerror事件。這個回呼函數有一個參數error，這個參數有3個欄位：message - 錯誤訊息；filename - 發生錯誤的腳本檔案；lineno - 發生錯誤的行。
銷毀執行緒
在執行緒內部，使用close方法執行緒自己銷毀自己。在執行緒外部的主執行緒中，使用執行緒實例的terminate方法銷毀執行緒。
下面從一個例子看線程的基本操作：
HTML代碼：

複製代碼

代碼如下:

腳本檔案fibonacci.js程式碼：

複製代碼

代碼如下:

//fibonacci.js
var fibonacci = function(n) {
return n };
onmessage = function(event) {
var n = parseInt(event.data, 10) ;
postMessage(fibonacci(n));
};

把它們放到相同的目錄，運行頁面文件，查看控制台，可以看到運行的結果。
這裡還有一點，在主執行緒中，onmessage事件可以用另一種方​​式掛接：

複製程式碼

程式碼如下:

worker.addEventListener('message', function(event) {
console.log("Result:" event.data);
}, falseole.log("Result:" event.data);
}, false );

個人覺得很麻煩，不如用onmessage直接。
使用其他腳本檔案
工作執行緒可以使用全域方法importScripts來載入和使用其他的網域內腳本檔案或類別庫。例如下面都是合法的使用方式：

複製代碼

代碼如下:

importScripts();/* imports nothing */
importScripts('foo.js'); /* imports just "foo.js" */
importScripts('foo.js', 'bar.js') ;/* imports two scripts */

匯入以後，可以直接使用這些檔案中的方法。看一個網上的小例子：

複製代碼

代碼如下:

/* *
* 使用 importScripts 方法引入外部資源腳本，在這裡我們使用了數學公式計算工具庫 math_utilities.js
* 當 JavaScript 引擎對這個資源檔案載入完畢後，繼續執行下面的程式碼。同時，下面的程式碼可以存取和呼叫
* 在資源檔案中定義的變數和方法。
**/
importScripts('math_utilities.js');
onmessage = function (event)
{
var first = event.data.first;
var second = event first = event.data.first;
var second = event event second .data.second;
calculate(first,second);
};
function calculate(first,second) {
//do the calculation work
var _difvisorst. second);
var common_multiple=multiple(first,second);
postMessage("Work done! "
"The least common multiple is " common_divisor
"The least common multiple is " common_divisor
" grmeat plescom ;

}

網上也有網友想到了利用這裡的importScripts方法解決資源預加載的問題(瀏覽器預先加載資源，而不會對資源進行解析和執行)，道理也很簡單。
線程嵌套
在工作線程中還可以在創建子線程，各種操作還是一樣的。
同步問題
Worker沒有鎖定的機制，多執行緒的同步問題只能靠程式碼來解決（例如定義訊號變數）。
共享型SharedWebWorker

共享型web worker主要適用於多連接並發的問題。因為要處理多連接，所以它的API與專用型worker稍微有點區別。除了這一點，共享型web worker和專用型worker一樣，不能存取DOM，並且對窗體屬性的存取也受到限制。共享型web worker也不能跨越通訊。
頁面腳本可以與共享型web worker通信，然而，與專用型web worker(使用了一個隱式的端口通信)稍微有點不同的是，通信是顯式的通過使用一個端口(port)對象並附加上一個訊息事件處理程序來進行的。
收到web worker腳本的首個訊息之後，共享型web worker把一個事件處理程序附加到啟動的連接埠。一般情況下，處理程序會執行自己的postMessage()方法來把一個訊息回傳給呼叫程式碼，接著連接埠的start()方法產生一個有效的訊息進程。
看網路上能找到的唯一個例子：建立一個共享執行緒用來接收從不同連線發送過來的指令，然後實作自己的指令處理邏輯，指令處理完成後將結果傳回各個不同的連線使用者。
HTML程式碼：

複製程式碼

程式碼如下:

;

共享工作者範例：如何在HTML5 中使用共享工作者

向共享工作人員傳送指令：

輸入>
身體>

腳本文件代碼：

複製代碼

代碼如下：

//建立一個共享執行緒用於接收從不同連線發送過來的指令，指令處理完成後將結果傳回各個不同的連線使用者。
var connect_number = 0;
onconnect = function(e) {
connect_number =connect_number 1;
//在這裡取得第一個連接埠
var port = e.ports[0] ;
port.postMessage('一個新連接！目前連接號為'
connect_number);
port.onmessage = function(e) {
//取得請求者的指令
var instructions=e.data.instruction;
var results=execute_instruction(指令);
port.postMessage('請求：'指令'回應'結果
'來自共享工作者...');
};
};
/*
* 此函數將用於執行請求者發送的指令
* @param instructions
* @return
*/
functionexecute_instruction(instruction)
{
var result_value;
//在這裡實作你的邏輯
//執行指令...
返回result_value；
}
}

返回result_value； >
在上面的共享線程範例中，在主頁面即各個使用者連接頁面建構出一個共享線程對象，然後定義了一個方法 postMessageToSharedWorker 向共享線程發送來之用戶的指令。同時，在共享執行緒的實作程式碼片段中定義 connect_number 用來記錄連接到這個共享執行緒的總數。之後，用 onconnect 事件處理器接受來自不同使用者的連接，解析它們傳遞過來的指令。最後，定義了一個方法 execute_instruction 用來執行使用者的指令，指令執行完成後將結果傳回給各個使用者。

這裡我們並沒有跟前面的例子一樣使用到了工作線程的 onmessage 事件處理器，而是使用了另外一種方式 addEventListener。實際上，前面已經說過，這兩種的實作原理基本上一致，只是在這裡有些稍微的差別，如果使用到了addEventListener 來接受來自共享線程的訊息，那麼就要先使用worker.port.start() 方法來啟動這個連接埠。之後就可以像工作線程的使用方式一樣正常的接收和發送訊息。
最後陳述
線程中能做的事：
1.能使用setTimeout(), clearTimeout(), setInterval(),clearInterval()等函數。
2.能使用navigator物件。
3.能使用XMLHttpRequest來發送請求。
4.可以在執行緒使用Web Storage。
5.執行緒中可以用self取得本執行緒的作用域。
線程中不能做的事：
1.線程中是不能使用除navigator外的DOM/BOM對象，例如window,document（想要操作的話只能發送訊息給worker創建者，透過回調函數操作）。
2.執行緒中不能使用主執行緒中的變數和函數。
3.執行緒中不能使用有"掛起"效果的操作指令，例如alert等。
4.執行緒中不能跨域載入JS。
線程也是需要消耗資源的，而且使用線程也會帶來一定的複雜性，所以如果沒有充足的理由來使用額外的線程的話，那麼就不要用它。
實用參考
官方文件：http://www.whatwg.org/specs/web-apps/current-work/multipage/workers.html
WebWorker分類說明：http://www.w3schools.com/html5/html5_webworkers.asp
腳本之家：http://www.jb51.net/w3school/html5/
WebWorker概述：https://developer.mozilla.org/en/Using_web_workers