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