基于 WebWorker 的 WebAssembly 图像处理吞吐量深度优化指南

// 主线程阻塞示例
function applyFilter(imageData) {
  for (let i=0; i<imageData.data.length; i+=4) {
    const r = imageData.data[i];
    const g = imageData.data[i+1];
    const b = imageData.data[i+2];
    // 计算操作...
  }
}

class WorkerPool {
  constructor(size) {
    this.workers = Array(size).fill().map(() => new Worker('processor.js'));
  }
  
  dispatch(task) {
    const worker = this.findIdleWorker();
    worker.postMessage(task, [task.buffer]);
  }
}

// C++ 分片处理函数
EMSCRIPTEN_KEEPALIVE 
void process_tile(uint8_t* data, int startY, int endY, int stride) {
  for (int y = startY; y < endY; y++) {
    uint8_t* row = data + y * stride;
    // SIMD 加速处理单行像素
  }
}

用户文件 → ImageBitmap → Worker → WASM Heap → OffscreenCanvas

// 自定义内存分配器（避免频繁 malloc）
#define MEM_POOL_SIZE (1024*1024*50) // 50MB 预分配

static uint8_t* memory_pool = NULL;
static size_t pool_offset = 0;

EMSCRIPTEN_KEEPALIVE
uint8_t* wasm_alloc(size_t size) {
  if (!memory_pool) {
    memory_pool = (uint8_t*)malloc(MEM_POOL_SIZE);
  }
  
  if (pool_offset + size > MEM_POOL_SIZE) {
    return NULL; // 溢出处理
  }
  
  uint8_t* ptr = memory_pool + pool_offset;
  pool_offset += size;
  return ptr;
}

#include <wasm_simd128.h>

// 使用 SIMD 加速 RGBA 转灰度
void rgba_to_grayscale(uint8_t* data, int len) {
  const v128_t weights = wasm_f32x4_splat(0.299f, 0.587f, 0.114f, 0.0f);
  
  for (int i=0; i<len; i+=16) { // 16字节=4像素
    v128_t pixels = wasm_v128_load(data + i);
    v128_t result = /* SIMD 计算流程 */;
    wasm_v128_store(data + i, result);
  }
}

// 错误示例：复制像素数据
worker.postMessage({ data: new Uint8Array(buffer) }); // 复制操作!

// 正确做法：Transferable 传输
worker.postMessage({ buffer }, [buffer]); // 零拷贝

// 预初始化 Worker 池
const warmupWorker = new Worker('processor.js');
warmupWorker.postMessage({ type: 'init' });

function scheduleTiles(image, tileSize) {
  const tiles = [];
  for (let y=0; y<image.height; y+=tileSize) {
    for (let x=0; x<image.width; x+=tileSize) {
      tiles.push({
        x, y,
        width: Math.min(tileSize, image.width - x),
        height: Math.min(tileSize, image.height - y)
      });
    }
  }
  return tiles;
}

[主线程]
  ├── 用户交互
  ├── 文件解码
  └── 任务调度
        ↓
[Worker Pool (4 Workers)]
  ├── WASM 模块1：边缘检测
  ├── WASM 模块2：颜色校正
  ├── WASM 模块3：高斯模糊
  └── WASM 模块4：锐化
        ↓
[结果聚合线程]
  └── OffscreenCanvas 合成

// worker.js
let wasmModules = {};

// 并行加载多个 WASM 模块
async function loadModule(name) {
  const { instance } = await WebAssembly.instantiateStreaming(
    fetch(`/${name}.wasm`),
    { env: { memory: new WebAssembly.Memory({ initial: 256 }) }
  );
  wasmModules[name] = instance.exports;
}

self.onmessage = async ({ data }) => {
  const { operation, buffer, width, height } = data;
  
  // 获取 WASM 内存指针
  const ptr = wasmModules[operation].get_buffer(width * height * 4);
  const heap = new Uint8Array(wasmModules[operation].memory.buffer);
  
  // 直接写入内存（零拷贝）
  heap.set(new Uint8Array(buffer), ptr);
  
  // 执行处理
  wasmModules[operation].process(ptr, width, height);
  
  // 返回结果
  self.postMessage({ buffer: heap.buffer }, [heap.buffer]);
};

// 性能追踪装饰器
function perfLogger(target, name, descriptor) {
  const original = descriptor.value;
  descriptor.value = function(...args) {
    const start = performance.now();
    const result = original.apply(this, args);
    const duration = performance.now() - start;
    console.log(`${name} executed in ${duration.toFixed(2)}ms`);
    return result;
  };
}

class ImageProcessor {
  @perfLogger
  applyFilter(buffer) {
    // 处理逻辑
  }
}

# Nginx 配置示例
server {
  add_header Cross-Origin-Opener-Policy "same-origin";
  add_header Cross-Origin-Embedder-Policy "require-corp";
  add_header Cross-Origin-Resource-Policy "cross-origin";
}

// 内存监控
setInterval(() => {
  const memory = wasmModule.memory;
  console.log(`WASM 内存使用: ${memory.buffer.byteLength / 1024 / 1024}MB`);
}, 5000);

// 使用 256 位 SIMD 指令 (AVX2 等效)
v128_t v1 = wasm_v128_load(data + i);
v128_t v2 = wasm_v128_load(data + i + 16);
v128_t result = wasm_i8x16_shuffle(v1, v2, 0,1,2,3,4,5,6,7,...);

// 将 WASM 处理结果传入 WebGPU
const gpuBuffer = device.createBuffer({
  size: wasmBuffer.byteLength,
  usage: GPUBufferUsage.COPY_DST | GPUBufferUsage.STORAGE
});
device.queue.writeBuffer(gpuBuffer, 0, wasmBuffer);

// 分帧处理避免卡顿
function processChunk(start, end) {
  // 处理数据块
  if (end < totalLength) {
    requestIdleCallback(() => processChunk(end, end+chunkSize));
  }
}

总耗时 = Max(解码时间, 传输时间, Max(Worker处理时间), 渲染时间)