ReactJS扫描线：优化SciChartJS性能，复用wasmContext实现多图表渲染

问题概述 #

初始化约40个SciChart图表/曲面后，渲染帧率降至5-10帧/秒，推测与未复用wasmContext有关，但不清楚复用方法；同时图表线条偶尔显示异常，且因需用SortableJS实现拖拽，必须使用独立的图表曲面。

当前初始化代码 #

export const initScichart = async (divElementId) => {
  SciChartSurface.UseCommunityLicense();
  //console.log(divElementId.id);
  const { sciChartSurface, wasmContext } = await SciChartSurface.create(
    divElementId,
    {
      theme: new SciChartJsNavyTheme(),
    }
  );

  sciChartSurface.xAxes.add(
    new NumericAxis(wasmContext, {
      visibleRange: new NumberRange(0, 5),
    })
  );
  sciChartSurface.yAxes.add(
    new NumericAxis(wasmContext, {
      autoRange: EAutoRange.Always,
    })
  );

  const xyDataSeries = new XyDataSeries(wasmContext, {
    fifoCapacity: 220_000, // set fifoCapacity. Requires scichart.js v3.2 or later
    fifoSweeping: true,
    fifoSweepingGap: 2_200,
    containsNaN: false,
    isSorted: true,
  });

  sciChartSurface.renderableSeries.add(
    new FastLineRenderableSeries(wasmContext, {
      dataSeries: xyDataSeries,
      strokeThickness: 1,
      stroke: "#50C7E0",
    })
  );

  xyDataSeries.sciChartSurfaceToDelete = sciChartSurface;

  return xyDataSeries;
};

优化方案与问题解决 #

1. 复用WasmContext提升性能 #

每个WasmContext对应一个WebAssembly实例，复用它能大幅减少内存占用和初始化开销，实现方式如下：

• 全局初始化一个WasmContext实例，仅执行一次
• 修改初始化函数，传入复用的上下文：

// 全局初始化WasmContext，仅执行一次
let sharedWasmContext;

export const initSharedWasmContext = async () => {
  SciChartSurface.UseCommunityLicense();
  sharedWasmContext = await WasmContext.create();
};

// 修改后的图表初始化函数
export const initScichart = async (divElementId) => {
  // 确保全局上下文已初始化
  if (!sharedWasmContext) {
    await initSharedWasmContext();
  }

  const sciChartSurface = await SciChartSurface.create(
    divElementId,
    {
      theme: new SciChartJsNavyTheme(),
    },
    sharedWasmContext // 传入复用的WasmContext
  );

  // 后续轴、数据系列、渲染系列统一使用sharedWasmContext
  sciChartSurface.xAxes.add(
    new NumericAxis(sharedWasmContext, {
      visibleRange: new NumberRange(0, 5),
    })
  );

  sciChartSurface.yAxes.add(
    new NumericAxis(sharedWasmContext, {
      autoRange: EAutoRange.Always,
    })
  );

  const xyDataSeries = new XyDataSeries(sharedWasmContext, {
    fifoCapacity: 220_000,
    fifoSweeping: true,
    fifoSweepingGap: 2_200,
    containsNaN: false,
    isSorted: true,
  });

  sciChartSurface.renderableSeries.add(
    new FastLineRenderableSeries(sharedWasmContext, {
      dataSeries: xyDataSeries,
      strokeThickness: 1,
      stroke: "#50C7E0",
    })
  );

  xyDataSeries.sciChartSurfaceToDelete = sciChartSurface;

  return xyDataSeries;
};

2. 其他性能优化措施 #

• 降低FIFO容量：当前fifoCapacity: 220_000过大，若业务不需要这么多历史数据，可适当降低，减少内存占用和渲染计算量
• 启用虚拟绘制：开启useVirtualDrawingSurface，仅渲染可视区域内的数据，适合大数据量图表：

  new FastLineRenderableSeries(sharedWasmContext, {
    // ...其他配置
    useVirtualDrawingSurface: true
  })
  

• 批量更新数据：实时更新时避免频繁调用append()，改为批量添加数据后再触发刷新
• 关闭非必需组件：禁用tooltip、图例等不需要的交互组件，减少渲染负载
• 固定容器尺寸：确保每个图表容器的宽高固定，避免拖拽或布局变化触发频繁重排

3. 线条显示异常排查 #

• 校验数据有效性：确认数据源无NaN或异常值，即使设置了containsNaN: false，仍需保证输入数据合规
• 调整渲染参数：尝试增大strokeThickness或更换stroke颜色，排查是否为渲染层级或透明度问题
• 处理拖拽重绘：监听SortableJS拖拽结束事件，调用sciChartSurface.invalidateElement()强制图表重绘
• 核对版本兼容性：确保SciChartJS版本（需v3.2+支持FIFO特性）与Wasm模块版本匹配，避免版本不一致导致的渲染异常

内容的提问来源于stack exchange，提问作者Dolev Dublon