01 · 图像处理（Wasm + Worker）

字数: 0 字 时长: 0 分钟

一句话

在线滤镜、压缩等要改像素，算力大；纯 JS 在主线程算会卡 → Wasm 算得快 + Worker 不堵 UI + OffscreenCanvas 少传图。

和你日常工作的关系

filter: blur() 只能做简单效果；高斯模糊、锐化等要读 ImageData 逐像素算。一张 4K 图百万像素，双重 for 循环主线程会假死。

四层优化（记职责，别混）

技术	解决什么
WebAssembly	计算快（近原生）
Web Worker	计算不占主线程
OffscreenCanvas	Worker 里画，不必把大图 post 回主线程
requestIdleCallback	主线程何时 postMessage，调度优化

演示（简化）

01-image-main-thread.html — 主线程灰度化时拖动滑块感受卡顿。完整 Wasm/OpenCV 见课程讲义（需 Emscripten 编译链）。

2 年经验要补的概念

• ImageData：getImageData 得到 width×height×4 字节 RGBA。
• Worker：无 DOM，用 postMessage 传数据（大图拷贝贵 → 才要 OffscreenCanvas）。
• Wasm：C/C++ 编译成 .wasm + 胶水 JS，cwrap 调函数。

面试 STAR

• 在线编辑卡顿 → 后端有网络不确定性 → Wasm+Worker+OffscreenCanvas → 4K 滤镜 2.5s→500ms 量级（换成你项目真实数）。
• 分技术点讲，每点留钩子。

课程资料

01. 图像处理/课件资料/01-技术讲解.md（无完整可运行课堂代码，以讲义为主）