ReactJS 扫线：优化 SciChartJS 性能，复用 wasmContext 进行多图表渲染

Question

我的 scichartjs 存在性能问题，在初始化大约 40 个图表/表面时，渲染状态下降到每秒 5-10 帧。

我认为这可能与我每次运行 create 函数并且没有重用 wasmContext 可能有关？ 但我不确定如何重用 wasmContext 或者这种类型的最佳性能是什么

演示：https://9669tv.csb.app/

（由于最大上传大小为 2 MB，Giff 质量较低，对此深表歉意）

这是我的初始化函数

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;
};

我需要不同表面上的图表的原因是我需要将它们包装在 SortableJS 中（以便能够将它们拖过网站）

我认为配置中的某些问题是问题所在，因为该行有时显示得很奇怪

Answer 1

这也已在 SciChart.js 论坛

发布并回答

TLDR 是：

• 使用

  sciChartSurface.create()

  确实共享一个 wasmContext、一个 WebGL 引擎实例，并且是使用 SciChart 实例化图表的最低内存方式
• 但是，这种方法也牺牲了一点性能。在 scichart 的 SubCharts API 中使用 WebGL 上下文共享是在许多图表场景中获得更快绘制速度的方法
• 您的示例有 40 个图表、80 个轴、800 个标签、1000 条网格线、每个图表 220k 个点、880 万个点，所有这些都实时更新。考虑到这些情况，5-10 FPS 还不错，但论坛帖子有一些关于如何进一步改进的建议
• 视觉渲染伪影也包含在论坛帖子中，您可能错误地设置了

  isSorted

  标志，应该检查一下。