各位「網路工作者」大家好！ Web Worker 是由 W3C 以及 WHATWG 共同制定出來的API，讓 javascript 可以獨立在背景執行而不會影響...
那些年，我們一起讓瀏覽器當掉的日子 昨天提到了 Worker 就像是主從式架構一樣，有要求才有產出，而前後端的任務切割，就是在將商業邏輯與頁面呈現區隔開來。但隨...
本文主要會談到 web worker、SIMD 與 asm.js。 到目前為止我們只談論了如何有效的運用非同步處理模式，現在就來探討為什麼非同步處理對 Jav...
身為前端開發者，整日與 JavaScript 這門程式語言打交道，應該都知道它是一個 single-threaded 的程式語言，剛開始會覺得有點詫異，現在的...
前幾天學習關於 Web worker 的知識時，我發現不同地方都會使用 postMessage 函式把訊息發送出去，但不同地方使用 postMessage 的方...
前端大部分接觸到的資料格式最常見的就是 json，而 Stream 對前端來說應該是個比較陌生的概念，但每次對後端呼叫 api 取得資料的時候，回來的資料格式就...
終於到了最後一個範例，在 第一天的文章 - 前言 提到最近工作上使用到 opencv.js，所以才有這 30 天的 web worker 系列文，有始有終，今天...
什麼是 Worklet? 官方文件提到 Worklet 是輕量級的 web worker，使網路開發人員可以存取低階的渲染管道 Worklet 種類 MDN 上...
昨天介紹了 SharedArrayBuffer，使用 SharedArrayBuffer 可以在不同的線程中共享記憶體，達到高效的運算功能，但隨之而來的缺點就是...
Javascript 最初是設計在瀏覽器上執行的語言，而瀏覽器上會有各種的使用者操作，像是輸入文字、點擊按鈕等，這些操作最終都會反映在畫面上的渲染，為了維持畫面...
在這 Web worker 系列文的一開始就提到 worker 線程之間的資料傳遞使用 postMessage const worker = new Worke...
workerpool 是一個可以同時用在 node.js 跟 瀏覽器(web worker) 的套件，實作了 Thread pool 的概念，讓程式可以做到高效...
importScripts 在 worker 中可以使用 importScripts 將外部的套件引入進來，這樣會將 script 裡的變數都以全域的方式匯入...
BroadcastChannel 是 HTML 規範中用來讓多個線程互相溝通的方式，不像前兩天介紹的 MessageChannel 只能做到兩者之間的通訊，Br...
今天與明天會介紹一些與 Web worker 相關的套件，今天介紹的 comlink 是 google 團隊開發的套件，目的是讓 Web worker 使用起來...
最近工作上有一些需求要將 2D 的圖片做影像處理，最後要達到類似圖片模糊的效果，而使用者可以藉由 slider 調整模糊的比例，從 0~100%，數值越大的話圖...
Dedicated worker 是 Web worker 中的一個種類，特色是 Dedicated worker 線程只能被當下創立的主線程操作使用。而主線程...
昨天提到 postMessage 背後使用了 structuredClone 算法將資料 深複製 (deep copy) 後再進行傳遞，雖然這樣保證了資料的完整...
使用 preload 優先下載資源 不知道大家有沒有使用過 preload，preload 用來明確告知瀏覽器，某一份資源是很重要的，所以請優先下載它，使用方式...
昨天介紹了使用 modulepreload 預先加載 module worker，可以較早取得重要的資源，用意跟 preload 是一樣的，但不知道有沒有人覺得...
昨天學習到使用 OffscreenCanvas 在 Web worker 中操作圖像，避免主線程處理 canvas 的耗時操作導致畫面卡頓，今天打算繼續優化前兩...
ArrayBuffer 大概是 Transferable objects 中最常見的一種了，雖然也是矩陣，但不同於一般使用的 Array，ArrayBuffer...
昨天的範例中顯示當圖片的解析度很高時，執行 getImageData 會很久的問題 (我的電腦 Chrome 瀏覽器耗時 200~300ms 左右)，但如果想將...
一開始我們從最常使用的 web worker - Dedicated worker 開始，接著介紹使用 postMessage 在主線程與 worker 線程間...
在今天以前所介紹的都是一般較常用到的 Dedicated worker，Dedicated worker 只能被當下創建的線程使用，而 Shared worke...
在 HTML 檔案中使用 Javascript 我們知道在 HTML 使用 Javascript 大致上有兩種方式 從另一個檔案引入 js (externa...
主線程與 worker 線程之間通常會使用 postMessage 傳遞資料，為避免不同的線程操作同一筆資料出現同步問題，實際上背後會執行一個叫做 struct...
昨天介紹了 ImageData 的用法，今天來寫個範例，看看如何在 Web worker 中處理 ImageData，並增進效能吧。 範例 Demo 目的 利...
昨天我們瞭解到使用 postMessage 時，隨著傳遞的資料越大，耗費的時間就會越久，雖然在桌機上沒什麼問題，但到了手機這種低硬體的環境上，就可能會有效能問題...
ImageBitmap 表示一種能夠被繪製到 canvas 元素上的位置圖像，通常是使用 createImageBitmap() 的方式產生 可以看到 Imag...
Summer
莫力全 Kyle Mo
bcjohn
iThome鐵人賽
看影片追技術