關於前端的 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,不過這個應該市佔率不高: