【Web微知識系列】 Web Workers

為什麼javascript要設計為單執行緒?

理解javascript非同步的概念

• 同步任務： 主執行緒上排隊執行的任務。
• 異步任務： 不進入主執行緒，而是進入任務佇列等待執行。

1. 主程序會先從stack中執行function
2. 執行過程中遇到setTimeout這類的非同步API呼叫，會透過事件委託的機制掛一個callback到setTimeout之類的Web API，執行完畢後會將該callback傳入上圖的callback queue等待。
3. 執行堆棧空閒時才從callback queue中取出任務執行
4. 因此我們才會使用setTimeout的技巧讓一些需要長時間計算的任務排到任務佇列中等待，然而主執行緒就不會因為這個任務發生阻塞現象，可以先執行觸發loading動畫的事件後才處理這些耗時的任務，讓user感覺到畫面並非被鎖死

Web Workers的類型

• Dedicated workers: 只能與產生它的頁面相互溝通。
• Shared workers: 只要是相同來源(分頁、iframe)上執行的程序都能夠相互溝通。

應用的情境

• 解密等複雜的數學運算。
• 排序大量的array。
• 緩存資料。
• 語法高亮標記、拼音檢查。
• 影像、視訊、音頻的解析處理。
• polling web services。

Work中常用的方法

• postMessage(data)： 子線程與主線程之間相互溝通的方法，傳遞的data為任意值。
• onmessage： 監聽線程之間message的傳遞，當線程之間觸發postMessage時，能夠藉由onmessage順利接收傳遞的資料。
• onerror：常用於debug。
• terminate()： 主線程中終止worker任務的API，一旦終止後不能再次啟用，只能重新創建。

使用上的限制

• 無法訪問主頁面的dom結構。
• 無法使用全域變數或者全域函數。
• 無法使用window或document。
• 不能傳遞functions。

可以使用的API

• setTimeout、clearTimeoput、setInterval 等定時器相關的方法。
• navigator 識別瀏覽器的相關資訊。
• importScripts() 允許worker載入依賴套件到自己的作用域內。
• XMLHttpRequest、Websocket 與後端之間的通訊。
• location read only。
• Functions and classes available to Web Workers有詳細列出更多可以使用的function。

開始使用Web Workers

首先需要檢查瀏覽器是否支援Web Workers

function isWebWorkerSupport() {

 return typeof Worker !== “undefined”;

}if (isWebWorkerSupport()) {

 ….

} else {

 alert(“Ops, your browser doesn’t support Web Worker”);

}

簡單的創建一個Worker

var worker = new Worker(“worker.js”);

與Worker之間的溝通方式

//傳遞消息給worker這裡可以是array、string、number等型態

worker.postMessage(“Send to worker”);

//監聽message事件，接收worker回報的訊息

worker.onmessage = function(e) {

 console.log(e.data);

}

self.onmessage = function(e) {

 //處理複雜運算完成後回報運算結果或者通知

 self.postMessage(“finished”);

}

終止worker工作

worker.terminate();

實際範例

各家瀏覽器支援狀況

References

• https://www.w3.org/TR/workers/
• https://developer.mozilla.org/zh-TW/docs/Web/API/Web_Workers_API/Using_web_workers
• Background JavaScript Makes Web Apps Faster
• event loop