系列文章
[Day 1] 網頁的另一個大腦：從基礎到進階掌握 Web Worker 技術 - 前言
最近工作上有一些需求要將 2D 的圖片做影像處理，最後要達到類似圖片模糊的效果，而使用者可以藉由 slider 調整模糊的比例，從 0~100%，數值越大的話圖...
Web worker 介紹
Javascript 最初是設計在瀏覽器上執行的語言，而瀏覽器上會有各種的使用者操作，像是輸入文字、點擊按鈕等，這些操作最終都會反映在畫面上的渲染，為了維持畫面...
Dedicated worker 基本用法
Dedicated worker 是 Web worker 中的一個種類，特色是 Dedicated worker 線程只能被當下創立的主線程操作使用。而主線程...
在 Web worker 中使用外部套件
importScripts 在 worker 中可以使用 importScripts 將外部的套件引入進來，這樣會將 script 裡的變數都以全域的方式匯入...
使用 structuredClone 將數據複製到 Web worker
主線程與 worker 線程之間通常會使用 postMessage 傳遞資料，為避免不同的線程操作同一筆資料出現同步問題，實際上背後會執行一個叫做 struct...
postMessage 速度測試
昨天提到 postMessage 背後使用了 structuredClone 算法將資料 深複製 (deep copy) 後再進行傳遞，雖然這樣保證了資料的完整...
可轉移的物件 - Transferable objects
昨天我們瞭解到使用 postMessage 時，隨著傳遞的資料越大，耗費的時間就會越久，雖然在桌機上沒什麼問題，但到了手機這種低硬體的環境上，就可能會有效能問題...
Transferable objects - ArrayBuffer
ArrayBuffer 大概是 Transferable objects 中最常見的一種了，雖然也是矩陣，但不同於一般使用的 Array，ArrayBuffer...
Transferable objects - MessagePort (Channel messaging)
MessagePort 是 HTML 中 Channel Messaging API 的接口，用途拿來進行雙向溝通傳遞資料，有點類似 addEventListe...
Transferable objects - MessagePort
昨天學習了 Channel messaging 在主頁面與 iframe 間的訊息傳遞，而今天就讓我們來看看 MessagePort 怎麼在 web worke...