讓網頁在背景執行緒 (Thread) 中執行程式- Web Workers

分享:

傳統的網頁在執行 javascript 的時候通常是在作業系統 Main Thread 執行,那如果有時我們遇到需要處理比較久的事情網頁就很有可能卡住,或是我們希望一些事情可以同步執行,就可以使用 Web Workers 在背景執行,而且兩線可以透過 postMessage 發送訊息、onmessage 接收訊息來溝通。

目前主流瀏覽器都支援 Web Workers

使用 web workers 是需要在 server 上執行的,如果在本機端使用 vs code 的 liver server 就能夠正常運行了。

要使用 web workers 需要把 js 在外面獨立寫一隻,並用 new Workers() 來建立 web workers 物件

var worker = new Worker("web-worker.js");
worker.onmessage = function (event) {
	//接收回傳的資料
}

 

在 web-workers.js 只要把你想要做的事處理完再丟回來就好了:

//這邊放要處理的程式
result="";
postMessage(result);

 

在主程式呼叫 terminate 就可以結束 worker,或是在 worker 裡呼叫 close();

worker.terminate();

 Worker執行緒能存取一個全域函數 (global function), importScripts()。importScripts() 可以讓 worker 端引入相同網域的程式碼腳本與 libraries,importScripts()可接收零到數個要被輸入資源的URI,底下為幾個範例:

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

 

處理錯誤事件:

worker.onerror = function(e) {
document.getElementById('error').textContent = [
'ERROR: Line ', e.lineno, ' in ', e.filename, ': ',
e.message].join('');
}