如何优化Canvas绘制区域面积计算的JavaScript函数性能

问题背景 #

实现的Canvas绘制区域面积、平均HU值计算JavaScript函数在低频触发场景下运行正常，但在短时间高频触发场景（最高5秒内触发200次）下性能不足，拖累整体Web应用表现。原实现核心逻辑为全量读取画布ImageData，遍历Alpha通道统计非透明像素数，累加对应像素HU值计算结果，单次数组遍历长度最高可超过100万。
原实现代码：

Tegaki.refreshMeasurements = () => {
  for (let layer of Tegaki.layers) {
    if (layer.name == 'background') continue;
    
    let canvas = layer.canvas
    let i, ctx, dest, data, len;
    ctx = canvas.getContext('2d')
    dest = ctx.getImageData(0, 0, canvas.width, canvas.height);
    data = dest.data,
    len = data.length;

    let totalPixels = 0;
    let totalHU = 0

    for (i = 3; i < len; i += 4) {
      if (data[i] > 0) {
        totalPixels++;
        totalHU += (Tegaki.selectedSlicePixelData[Math.floor(i/4)] + 
                   Tegaki.selectedSliceRescaleIntercept)
      }
    }

    let area = totalPixels * Tegaki.selectedSlicePixelSpacing / 100;
    let meanHU = totalHU / totalPixels
        
    let layerType = _this.layerTypes.find(t => t.id == layer.name)
    layerType.area = area;
    layerType.meanHU = meanHU
  }
}

可落地优化点 #

按优化收益从高到低排序：

• 前置做触发节流，减少无效计算
  5秒200次触发相当于每25ms触发一次，远高于浏览器每秒60帧的刷新节奏，完全没必要每次触发都全量执行计算。直接用requestAnimationFrame做节流，把同一帧内的多次触发合并为1次计算，单帧最多执行1次统计逻辑，执行次数直接可降到原有水平的1/4以上；如果是绘制过程中需要展示实时数值，可再加100ms防抖，仅在用户绘制停顿超过100ms时计算最终精确值，绘制过程中每3帧跑一次近似值即可。
• 替换全画布读取为脏区计算，大幅降低遍历数据量
  原逻辑每次都读取全画布的ImageData，绝大多数手绘场景下单次绘制仅覆盖画布很小一部分区域。可以在绘制逻辑中增加脏区记录，每次画笔落下时记录覆盖区域的最小边界（最小X、最小Y、最大X、最大Y），统计时仅调用getImageData读取脏矩形范围内的像素数据，遍历数据量通常可降到全画布的5%_{20%，性能提升5}20倍。如果是多层叠加场景，还可以给每个图层加脏标记，只有图层内容发生变化时才重算该图层的数值，内容没变化的图层直接复用上次计算结果。
• 优化循环逻辑，减少循环内重复计算
  把循环内所有不变的常量、对象属性提前缓存为局部变量，替换高开销运算：
  1. 不要每次调用都执行canvas.getContext('2d')，图层初始化时就把ctx缓存到layer对象上，直接复用即可，减少API调用开销；
  2. 把Tegaki.selectedSliceRescaleIntercept、Tegaki.selectedSlicePixelData这类循环内不会变的引用提前存为局部变量，JS访问局部变量的速度远快于沿作用域链查找对象属性；
  3. 把循环内的Math.floor(i/4)替换为位运算i >>> 2，或者直接维护独立的像素索引变量每次循环自增，避免Math方法的调用开销；
  4. 提前把_this.layerTypes构建为id为key的Map结构，查找layerType时直接通过key读取，不要每次都用find遍历数组。
     优化后的循环参考：

  // 循环外提前缓存常量
  const intercept = Tegaki.selectedSliceRescaleIntercept;
  const pixelData = Tegaki.selectedSlicePixelData;
  const pixelSpacing = Tegaki.selectedSlicePixelSpacing;
  const layerTypeMap = new Map(_this.layerTypes.map(t => [t.id, t]));
  // 每个图层提前缓存ctx，不用重复获取
  for (let layer of Tegaki.layers) {
    if (layer.name == 'background') continue;
    if (!layer.dirty) { // 脏标记判断，没变化直接复用旧值
      continue;
    }
    // 仅读取脏区数据，替换原全画布读取
    const dest = layer.ctx.getImageData(layer.dirtyX, layer.dirtyY, layer.dirtyW, layer.dirtyH);
    const data = dest.data;
    const len = data.length;
    let totalPixels = 0;
    let totalHU = 0;
    let pixelIdx = 0;
    for (let i = 3; i < len; i += 4) {
      if (data[i] > 0) {
        totalPixels++;
        totalHU += pixelData[pixelIdx] + intercept;
      }
      pixelIdx++;
    }
    const area = totalPixels * pixelSpacing / 100;
    const meanHU = totalPixels / totalPixels;
    const layerType = layerTypeMap.get(layer.name);
    layerType.area = area;
    layerType.meanHU = meanHU;
    layer.dirty = false; // 计算完重置脏标记
  }
  

• 大计算量场景挪到Web Worker执行，避免阻塞主线程
  如果画布分辨率极高（比如4K以上画布，单画布像素超800万），就算做了前面的优化单次计算还是要几毫秒，可以把像素遍历逻辑挪到Web Worker后台线程执行：把ImageData通过转移控制权的方式传给Worker，Worker遍历完成后把计算结果发回主线程，整个计算过程完全不阻塞主线程的UI响应和渲染，不会出现页面卡顿的情况。如果用OffscreenCanvas还可以直接把画布控制权转给Worker，连数据传输的拷贝开销都能省掉。

内容的提问来源于stack exchange，提问作者Giot Dang