關於前端的 JS 技術還真的是需要筆記的內容。
這次把 web worker 記錄起來，這是幾年前就有應用的功能，也是一個古老的技術了，意外的其實滿常使用的。
先重點整理，首先是 Web Worker 的介紹：
- 解決 js 單執行緒的工具（web worker 產生 OS 層級的執行緒），避免被放到 event queue 中排隊，參考、參考。
- 解決 js 中 setInterval() 因瀏覽器節流模式嚴重失準，參考。
- 應用在大量背景運算、長時間的 I/O運作（例如計時器）、避免分頁長時間閒置導致 js 不運作（例如觸發事件時的通知音效）的問題。
- 在多核心 cpu 的 Client 端上，使用 web worker 優勢會比較看得出來（通通跑起來）。
這裡有一篇幾年前製作的 web worker DMEO，實作計時器功能，如果使用 setTimeout() 或是 setInterval() 方法很容易因為各種原因造成時間失准的問題。這裡也有一份 Mozilla 提供的 DMEO。這裡有份教學。
實作上：
- Main Script 和 Worker Script 實作 postMessage() 和 worker onmessage 事件拋接資料，參考。
- 常用有 Dedicated 和 Shared 兩種，差異在 Shared Web Worker 不會因為在同網站中換頁而消失（e.g. 購物車、聊天室..）。
- 有一個不太常用的功能 Embedded workers ，主要是利用了HTML5 的 data block 功能，就是想辦法把 web worker 塞在同一個 html 裡面。
- Main Thread 和 Worker Thread 彼此之間拋接資料使用參數，該參數是 call by value 的模式。
需要注意的部分：
- Web Worker 和 Service Worker 是不一樣的東西，參考。
- 雖然機會不高，在技術規劃時先確認使用的網頁載體是否支援相關技術； Android 設備在使用 webview 技術時，也會有遇到處理 webview 碎片化的問題，使用的替代套件要記得確認一下。
- 使用 web worker是做背景運算， UI 操作還是要回 UI Thread 上操作，規劃製作時需要注意維護的成本，除了效能之外，也要確認切分後可讀性。
- 需要注意耗能的問題，也就是除了網頁載體（瀏覽器/核心）的層面，可能用戶端也需要考慮一下。
- 資料拋接時，如果遇到大的物件參數（例如 20+mb 的 Array/JSON ），資源消耗就偏大，參考使用 Transferable Objects 方式來解決，參考、參考、參考。
附上參考文章。這篇是目前查到最詳盡的介紹：
使用 Web Workers – Web APIs | MDN
developer.mozilla.orgWeb Workers 提供簡單的方法讓網頁在背景執行緒 (Thread) 中執行程式，而不干擾使用者介面運行，另外，Worker 也可以利用 XMLHttpRequest 執行輸出/輸入(但是 responseXML 和 channel 這兩個屬性為 null)；一個 worker 可以藉由事件處理器來和 web worker 創造端互相傳送訊息，接下來本文會提供使用 web worker …
我們可以查到 web worker 支援的瀏覽器（唉）有哪些。目前看來主流瀏覽器包含手機都是支援的，有一個特別紅的是 Opera Mini，不過這個應該市佔率不高：
