什麼是Web Worker? 它可以做什麼？在了解Web Worker前，可能需要先知道：網頁中 Javascript

前情提要 - 網頁中 Javascript

Javascript 扮演的角色

Javascript 語言的特性

因為Javascript是一個單執行緒（single thread）的程式語言。
學術一點的說法：是只有一個主執行緒的程式；
簡單的來說：一次只能執行一個指令；
生活一點來說：
你專心寫程式不做其他事 --> 單執行緒
你邊寫程式邊聽音樂還邊唱歌 --> 多執行緒

Javascript 面臨的問題

由於「單執行緒」的程式語言特質，加上「前端(邏輯處理+畫面渲染)處理量日漸提升」，讓Javascript在效能面有時會面臨困境。而Web Worker就是解決這樣的困境的方法之一。

Web Worker 介紹

什麼是Web Worker?

Web Worker 是 HTML5 中提出的概念。

Web Workers makes it possible to run a script operation in a background thread separate from the main execution thread of a web application.

Web Worker替 JavaScript 創造多執行緒環境，允許主執行緒建立 Worker 執行緒，將一些任務分配給後者執行。

用一個簡單的例子來說明一下有沒有Web Worker之間的差異，比方我今天要製作珍珠奶茶和巧克力鬆餅：

在只有單執行緒的Javascript裡，我就需要先準備好我的data(麥香奶茶)，然後開始將資料做一些處理dowork(data)，像是加入珍珠和冰塊並把奶茶倒入，這類複雜的運算；做完之後再把處理過後的data拿出來使用useData(ProcessData)，把一整桶座好的珍珠奶茶裝成一杯；再繼續做下一個任務製作巧克力鬆餅。一件事情做完，再往下一件事做，就是原本Javascript的執行方式。

而加入Web Worker之後：

多了一個Worker執行緒，可以幫忙分擔工作，因此會讓Worker執行緒分擔一點複雜的工作（會花一點時間），而主執行緒可以繼續執行其他事情。同時進行就可以加快執行速度。如上圖所示，準備好麥香奶茶後(data)，我們把複雜的加冰塊、到奶茶、加珍珠的製作過程銷給Worker執行緒處理，而Worker執行緒再把處理後的資料（珍珠奶茶）傳回給主執行緒使用。在Worker執行緒製作珍珠奶茶的過程中，主執行緒可以進到下一個任務做巧克力鬆餅。因此整體完成的時間就可以比較快速！

簡而言之，Web Worker 就是多一個人幫忙分擔你要做的事，但這個人什麼都可以做嗎？有這麼好的事？？？

使用範圍與限制

當然沒這個好康啦，請人幫忙還是要有點限制的，這邊我們就來看一下Web Worker的使用範圍和限制

1. 可運行基本的javascript、XMLHttpRequest (XHR)
2. 幾乎無法對畫面做操作
   • 無法訪問window、document、DOM節點 且 腳本限制不可修改
   • 不可呼叫 alert、confirm

知道了Web Worker的使用範圍，那我們到底可以請他幫什麼忙？

使用情境

再開始說明情境前，我們在複習一下，Web Worker的特型：

1. 多執行緒
2. 與主執行緒獨立，不影響主執行緒運行

因此，我們大概可以歸納出兩種情境

情境1 – 太多分出去：

多任務串型轉成並行:順序的任務，轉為並行，任務之間必須沒有依賴關係，
但是要注意多任務調度的調配需要考慮

情境2 – 難的分出去：

大量運算任務避免在主執行緒中執行，複雜運算移到 Web Worker

程式範例

step1 程式檔案結構

• HTML x 1
  畫面呈現 – index.html
• Javascript x2
  主執行緒程式 – customize.js
  Worker執行緒程式 – worker.js
• 其他css…

step2 程式撰寫 - 主執行緒程式

customize.js (主執行緒程式)
2-1. 檢查是否支援web worker，若有的話便建立一個worker執行緒

2-2. 透過PostMessage傳送資料給worker執行緒,onmessage 接收worker執行緒處理好的資料

step3 程式撰寫 – worker 執行緒程式

透過onmessage 收主執行緒傳來的資料，PostMessage傳送處理好的資料

再將HTML加上所需的畫面，就可以達到引用Web Worker的效果
程式sample 下載 https://ppt.cc/fhmopx

產生的議題

議題1. 評估是否真的適合使用

使用Web Worker真的都變快嗎？簡單的運算和少量的運算如果加上兩執行序的溝通成本，那不如就是主執行緒自己製作就可以了。

議題2. PostMessage發送&接收 是否會造成卡頓？

由於主執行緒與Worker執行緒之間的溝通需要靠PostMessage(如下圖所示)

若PostMessage的發送接收時間較長，依然會造成卡頓，那怎樣的情況會造成發送接收時間較長？其實有數據顯示

當傳輸量特別大的時候，PostMessage 可能會造成卡頓的情況，不同平台，造成卡頓的傳輸量上限也不同

建議1.

• 當javascript中還包含動畫渲染，資料傳輸量保持在10K以下
• 當javascript中不包含動畫渲染，資料傳輸量保持在100K以下

建議2.分段傳輸

建議3.傳遞 action 而不是 data 本身

議題3. 是否造成新的邏輯問題

議題4. 多執行緒下的錯誤處理

當任務分配給兩邊一定會多了一些會出錯的可能性，要注意的可能包含像：失敗處理、超時處理或衝突處理等等

實務上的環境支援程度

其實Web Worker還可以再仔細區分為兩種：「專用執行緒」和「共享執行緒」

• 專用執行緒（Dedicated Web Worker）
  通常大家講的Web Worker是指這種類型
  僅能被建立它的指令碼所使用
  （一個專用執行緒對應一個主執行緒）
• 共享執行緒（Shared Web Worker）
  能夠在不同的指令碼中使用
  （一個共享執行緒對應多個主執行緒）

專用執行緒（Dedicated Web Worker）瀏覽器支援度

目前約有 97.06% 的瀏覽器支援專用執行緒

共享執行緒 (Shared Web Worker)瀏覽器支援度

共享執行緒，則僅有大約 38.09% 的瀏覽器支援

好了，這就是簡單的Web Worker入門分享啦～～～