前端工程 好文記錄與分享

[好文分享] The Basics of Web Workers

FB公開社團 Larry的午茶時光
加入不需審核,歡迎讀者加入~
我的IG帳號: larry.time.taste。剛剛起步,歡迎大家追蹤~

http://www.html5rocks.com/en/tutorials/workers/basics/

HTML 5 新的規格: Web Workers
https://html.spec.whatwg.org/multipage/workers.html#workers

在此技術之前 JavaScript 是單執行緒的,所以如果在 client 端做 computationally intensive 的工作 (ex: image processing),通常頁面會 hang 住,再點頁面就會跳 warning dialog 之類。

Web Worker 的開啟相當簡單,在 caller side 下:

var worker = new Worker('task.js');
worker.postMessage(); // Start the worker.

postMessage 是 main thread 與 worker thread 溝通的方法 (當然兩端都要註冊 message handler)。另外上面連結還有提到:

1. Transferrable objects:C / C++ pass by reference 的概念。只要用 Transferrable Objects 規範內的 data type,搭配特定 postMessage prototype,就可以達到 object pass by reference,大幅提升 post 物件的效能 (本來是 pass by value)。

2. Subworkers:worker thread 可以再生成 worker thread。

3. Inline Workers:worker script 不用寫死在 js 檔裡,在 caller 端先產生 Blob 再產生 Worker。

4. Handling Errors:在 main thread 宣告 onError function 接 worker thread 丟出來的 error。

5. Same Origin Consideration:worker scripts and the webpage must be from the same origin。

FB公開社團 Larry的午茶時光
加入不需審核,歡迎讀者加入~
我的IG帳號: larry.time.taste。剛剛起步,歡迎大家追蹤~