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