網頁的另一個大腦 - Web worker

alt text

JavaScript 通常在作業系統的 Main Thread 執行,但若把程式碼放在 Web Workers 就可另闢戰場-Worker Thread,兩條線互不影響,讓 JavaScript 在背景執行,並且兩線可由訊息溝通-使用 postMessage 發送訊息、onmessage 接收訊息。

通常我們會將需要長時間運算且不含 Window 或 DOM Element 操作的程式碼放在 Web Workers,好處是不阻塞 Main Thread 而讓速度變快。

本範例的 Event model for web workers

worker_fibonacci

alt text

worker_heavyTask

alt text

worker1 - Web Workers API

使用 web API 來實作

MDN-Web Workers API

worker2 - VueUse - useWebWorker

用起來跟用 web API 很像,只是多封裝成方法

VueUse - useWebWorker

worker3 - VueUse - useWebWorkerFn

封裝成更好用的方法,也是三種裡最簡化的寫法,也有狀態可以使用,
worker terminate 之後也不會有 worker1、worker2 的問題 (無法再次使用)
官方的例子看起來跟 comlink 差不多

VueUse - useWebWorkerFn

Demo

GitHub

補充

這邊使用 postMessage、onmessage 來傳遞資料
也許之後可以用 comlink 寫寫看,看鐵人賽 感覺可以更方便,只是看起來只能搭配 Web Workers API


參考資料 reference

Web Workers

封裝 Web worker 的套件 - Comlink