iT邦幫忙

2021 iThome 鐵人賽

DAY 27
0
Modern Web

不只是串串API,新手前端30天系列 第 27

DAY27 - 來加速你的網站!利用Web Worker創造多執行緒的Javascript

什麼是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入門分享啦~~~


上一篇
DAY26 - 網站分析工具介紹 - 質化與量化的結合 - Matomo
下一篇
DAY28 - 工程師一定會用到的GIT懶人包
系列文
不只是串串API,新手前端30天30

尚未有邦友留言

立即登入留言