2015年5月10日 星期日

Javascript Worker

最近在寫一些前端的東西,深覺前.端.超.難.(yay)

接觸了HTM5 javascript 的worker ,在這裡筆記一下:

簡單來說,一般javascript的指令,都是存在一個執行緒裡執行,而worker 則可以開另一個執行緒在背景執行,就不會block住前端的UI的script,一般。
使用方法也很簡單,宣告一個worker並傳入一個檔案路徑,這個worker 就會負責執行檔案內的javascript。
要和worker 溝通,一律要經過postmessage跟onmessage 介面,postmessage會代入一個參數,可以用json寫得超級複雜,包括File, Blob, ArrayBuffer都可以傳遞;這時在對方的onmessage就會被呼叫,並包含這個物件的複製版本。
我看到的設計是這樣,在主要文件內 main.js 中,宣告worker
var worker = new Worker(“workerFile”);

在workerFile 內要定義onmessage 函式,並且用參數的command判斷執行哪個對應的函式:
this.onmessage = function(e) {
switch(e.data.command) {
case 'act1':
fun_act1(e.data.payload);
break;
}

這時候main.js就可以利用postmessage 叫worker 作事:
worker.postMessage({
command: 'act1',
payload: blahblahblah
})
worker.onmessage = function(e) {
data = e.data;
}

同樣我們在worker 裡面也可以呼叫postmessage,對方接口就是main.js 裡的onmessage,這樣就能做到雙方互相傳遞資料。
如果不想要以複製的方式傳遞資料,可以改用transferable object 的方式,減少複製成本,另外因為是多執行緒的關係,在worker 裡面,不應該去動到DOM,window, document, parent,這些都不是thread-safe。

至於更多詳細的內容,可見:
http://www.html5rocks.com/en/tutorials/workers/basics/

或者可以看worker 的spec:
https://html.spec.whatwg.org/multipage/workers.html
Related Posts Plugin for WordPress, Blogger...