OpenCV.js 的性能优化有哪些策略？

OpenCV.js 的性能优化是实际应用中的关键问题，以下是主要的优化策略：

1. WebAssembly 优化

使用 WASM 加速

OpenCV.js 已经使用 WebAssembly 编译，关键计算密集型任务会自动使用 WASM 执行。

javascript
// 检查 WASM 是否可用
if (cv.getBuildInformation().includes('NEON')) {
  console.log('WASM acceleration is available');
}

2. 内存管理优化

及时释放 Mat 对象

javascript
// 错误示例：内存泄漏
function badExample() {
  for (let i = 0; i < 100; i++) {
    let mat = new cv.Mat(1000, 1000, cv.CV_8UC3);
    // 处理 mat，但没有释放
  }
}

// 正确示例：及时释放
function goodExample() {
  for (let i = 0; i < 100; i++) {
    let mat = new cv.Mat(1000, 1000, cv.CV_8UC3);
    try {
      // 处理 mat
    } finally {
      mat.delete();
    }
  }
}

复用 Mat 对象

javascript
// 创建一次，重复使用
let tempMat = new cv.Mat();

function processImage(src) {
  try {
    // 复用 tempMat
    cv.cvtColor(src, tempMat, cv.COLOR_RGBA2GRAY);
    // 更多处理
  } finally {
    // 不需要删除 tempMat，继续复用
  }
}

// 最后清理
tempMat.delete();

3. 图像分辨率优化

降低处理分辨率

javascript
function processImage(src) {
  let small = new cv.Mat();
  let result = new cv.Mat();
  
  try {
    // 先缩小图像
    cv.resize(src, small, new cv.Size(src.cols / 2, src.rows / 2));
    
    // 处理小图像
    cv.cvtColor(small, small, cv.COLOR_RGBA2GRAY);
    cv.Canny(small, small, 50, 100);
    
    // 放大回原始尺寸
    cv.resize(small, result, new cv.Size(src.cols, src.rows));
    
    return result;
  } finally {
    small.delete();
    result.delete();
  }
}

4. 异步处理优化

使用 Web Worker

javascript
// 主线程
const worker = new Worker('opencv-worker.js');

function processInWorker(imageData) {
  return new Promise((resolve) => {
    worker.onmessage = (e) => {
      resolve(e.data.result);
    };
    worker.postMessage({ imageData }, [imageData.data.buffer]);
  });
}

// opencv-worker.js
self.onmessage = function(e) {
  const { imageData } = e.data;
  let src = cv.matFromImageData(imageData);
  let dst = new cv.Mat();
  
  try {
    cv.cvtColor(src, dst, cv.COLOR_RGBA2GRAY);
    cv.Canny(dst, dst, 50, 100);
    
    const result = new ImageData(
      new Uint8ClampedArray(dst.data),
      dst.cols,
      dst.rows
    );
    
    self.postMessage({ result }, [result.data.buffer]);
  } finally {
    src.delete();
    dst.delete();
  }
};

分块处理大图像

javascript
function processLargeImage(src, blockSize = 512) {
  const result = new cv.Mat(src.rows, src.cols, src.type());
  
  for (let y = 0; y < src.rows; y += blockSize) {
    for (let x = 0; x < src.cols; x += blockSize) {
      const width = Math.min(blockSize, src.cols - x);
      const height = Math.min(blockSize, src.rows - y);
      
      const roi = new cv.Rect(x, y, width, height);
      const block = src.roi(roi);
      const processed = new cv.Mat();
      
      try {
        // 处理块
        cv.cvtColor(block, processed, cv.COLOR_RGBA2GRAY);
        
        // 将结果复制到最终图像
        const resultRoi = result.roi(roi);
        processed.copyTo(resultRoi);
        resultRoi.delete();
      } finally {
        block.delete();
        processed.delete();
      }
    }
  }
  
  return result;
}

5. 算法选择优化

选择合适的算法

javascript
// 快速但精度较低
cv.Canny(gray, edges, 50, 100, 3);

// 精度高但慢
cv.Canny(gray, edges, 100, 200, 5);

// 使用 ORB 而不是 SIFT
let orb = new cv.ORB();  // 快
let sift = cv.SIFT_create();  // 慢但准确

6. 缓存优化

缓存计算结果

javascript
const cache = new Map();

function getCachedResult(key, computeFn) {
  if (cache.has(key)) {
    return cache.get(key);
  }
  
  const result = computeFn();
  cache.set(key, result);
  return result;
}

7. 性能监控

测量执行时间

javascript
function measurePerformance(fn) {
  const start = performance.now();
  fn();
  const end = performance.now();
  console.log(`Execution time: ${end - start}ms`);
}

measurePerformance(() => {
  cv.cvtColor(src, dst, cv.COLOR_RGBA2GRAY);
});

8. 完整优化示例

javascript
class OptimizedImageProcessor {
  constructor() {
    this.tempMat = new cv.Mat();
    this.worker = new Worker('opencv-worker.js');
  }
  
  async processImage(imageData) {
    return new Promise((resolve) => {
      this.worker.onmessage = (e) => {
        resolve(e.data.result);
      };
      
      // 降低分辨率
      const smallData = this.downsample(imageData, 0.5);
      this.worker.postMessage({ imageData: smallData }, [smallData.data.buffer]);
    });
  }
  
  downsample(imageData, scale) {
    const width = Math.floor(imageData.width * scale);
    const height = Math.floor(imageData.height * scale);
    const tempCanvas = document.createElement('canvas');
    tempCanvas.width = width;
    tempCanvas.height = height;
    const ctx = tempCanvas.getContext('2d');
    ctx.drawImage(imageData, 0, 0, width, height);
    return ctx.getImageData(0, 0, width, height);
  }
  
  cleanup() {
    this.tempMat.delete();
    this.worker.terminate();
  }
}

性能优化总结

1. 内存管理：及时释放 Mat 对象，复用临时 Mat
2. 分辨率控制：降低处理分辨率，提高速度
3. 异步处理：使用 Web Worker 避免阻塞主线程
4. 算法选择：根据需求选择速度或精度
5. 分块处理：大图像分块处理，避免内存溢出
6. 缓存策略：缓存重复计算结果
7. 性能监控：持续监控和优化性能瓶颈