[Javascript]Web Worker

隨著HTML5的掘起，前端能做的事也越來越多，例如Web Worker就可以在背景執行讓前端有多執行緒效果，這樣對於一些前端大量資料的運算或整理上大有幫助，不過要注意瀏覽器支援的問題(可以到這裡查看支援版號)

使用方法
index.html

//呼叫Worker
var worker = new Worker('worker.js');
//傳送訊息給Worker
worker.postMessage("TEST");
//Worker回傳
worker.addEventListener('message', function(e) {
	console.log('Worker said: ', e.data);
}, false);
//Worker Error Event
worker.addEventListener('error', function(error){
	console.error(error)
});
//release worker，與worker端的self.close()擇其一使用
//worker.terminate();

worker.js

self.addEventListener('message', function(e) {
    //Import Library
    importScripts("function.js");
    self.postMessage(e.data + " " + returnHello() );
    //release worker
    self.close();
}, false);

另外補充，因為Worker post的東西是有限制的，像下列的都不能使用

• window
• DOM
• document
• parent

Worker只能使用基本的javascript(陣列、字串等)，以及XMLHttpRequest

另外SharedWorker也可以在不同頁面上共享資源
index.html

var worker = new SharedWorker("worker.js");
worker.port.addEventListener("message", function(e) {
    alert(e.data);
}, false);
//啟動port
worker.port.start();
// post資料到shared web worker上
worker.port.postMessage("Johnson");

worker.js

//加總
var connections = 0;

//連接SharedWorker
self.addEventListener("connect", function (e) {
    var port = e.ports[0];
    connections++;
	//SharedWorker nessage
    port.addEventListener("message", function (e) {
        port.postMessage("Hello " + e.data + " (port #" + connections + ")");
    }, false);
	//啟動port才能繼續postMessage
    port.start();
}, false);