日期: 2011 年 10 月 5 日

如果看到 dedicated worker 這個名詞, 可能會讓人聯想到專注的工作者. 而 shared worker 就像是共用的人力資源. 其實無論 dedicated worker 或是 shared worker 都是 web worker 的一種, 而 web worker 當然不是指網路工作者.

Web worker 是 HTML (特別是 HTML5)  的一個 feature, 它允許一個以上的 thread, 特別是在有任務很重的 Javascript 的狀況下, 有效率地在 browser 上執行.

在未支援 web worker 的環境下, 必須等到 Javascript 被執行完之後, 才能執行完某個 thread. 這使得 Javascript 所花的時間不能夠被隱藏起來, 而降低了執行的效率.

Browser 支援 web worker 之後, 它定義了 run Java 的 API. 多個 Javascript 都可以被放到 background 執行. 而且這些 Javascript 不會直接 access DOM, 只是透過 message passing 來收發 event.

舉例來說, 傳統的 HTML 會花一段 code 寫 Javascript, 然後用 <Javascript></Javascript> 包起來, 接著在 HML 中調用 Javascript 所定義的 function.

但 Web worker 的做法, 直接在 <Javascript></Javascript> 中間, 把 Javascript 指定給 worker 管理. load 一個 Javascript 或是關閉它的方式如下:

var worker = new Worker("worker_script.js");
 
worker.close();

把 message 傳給 worker, 或是從 worker 接收的方法如下:

worker.postMessage("Hello World!");

worker.onmessage = function(event) { do something }

Dedicated worker 表示 worker 被 create 出來的時候, 它的 message port 就已經被產生了, 例如上面這種寫法. 它的最大優勢就是簡單.

shared worker 依據 port 來共用 worker. 表面看起來和 dedicated worker 只差一點點:

var worker = new SharedWorker("worker_script.js");
worker.port.onmessage = function(event) { do something }

但實際上, Javascript 裡面會有一個 assign port 的動作, 再為 port 設定一個 listener:

var port = event.ports[0];

port.onmessage = function(event) { do something }

透過這樣的'方式, 多個 window 都可以共用一個 worker thread.

由於 dedicated 和 shared worker 的特性不太相同, 號稱支援 Web worker 的 browser 也未必同時支援這兩種模式. 我們可以透過傳回值來確認 browser 是否提出支援.

[ref]

1. WIKI

2. Web Workers Editor's Draft 4 October 2011 [Complete!]

3. Javascript Web Workers: Opera 10.6 Beta Supports SharedWorkers

4. An Introduction to HTML 5 Web Workers  [Best!]