请教一个前端设计及实现问题, 绘制并实时更新 96 个折线图的最佳实践?

程序是这样的:

• 后端维护 96 个通道, 每个通道中有三种需要绘图的数据, 每隔 1s 更新一次.
• 前端则需要将 96 个通道数据绘制在折线图上, 但是不一定全部都挤在一个屏幕显示上.
• 二者交互的数据包含三种浮点数数据和他们对应的时间戳, 二者之间可以通过 ws 通信, 也可通过 ipc 通信.

问题有这些:

• 交互时, 是将 96 个通道数据一起发送好还是单独发送好.
• 前端绘制时选择什么绘图库性能好, 可选交互功能.
• 选择这种前后端分离的架构, 却追求性能, 是不是从一开始就走错了方向? 如果有其他架构, 选择什么样的架构比较合适?

目前我选择的是 tauri+vite+react+highchart(highstock).

我调研的每一个绘图库都吹榜他的性能, 包括上面选择的 highstock.

后端性能没有问题, 交互时后端单独发送数据, 前端使用 debounce.

但是性能却非常糟糕.

重采样呗 有啥纠结的

用 canvas 不是随便画，都是些 2d 的简单东西。而且不需要同屏显示，看到那些就显示那些。

@chairuosen #9 我是参考 https://www.npmjs.com/package/highcharts-react-official#optimal-way-to-update 这个绘图库提到的最优方式来更新的

@miloooz 是的 我就是用的追加数据. 后面我也试一下 echarts

https://codesandbox.io/p/devbox/prod-cache-l2k2gs 是这个 弄错了 @crazyBlack

所以我特别好奇 grafana 如何做到的。几乎页面不带卡的

@lurenjiaMAX 这个链接是个空项目，你看看哪里出了问题，上面只渲染当前可见是个好方法，试试 react-window

之前做过 120 个摄像头的缩略图+状态数据，但是不像楼主要秒级的，用的是 websocket ，大概有： 1. 判断哪些图像在浏览器滚动条外面，看不见的不刷新。 2. 一个批次一个批次的请求。比如先一次请求 10 个画面，然后画到页面上，观察用了多久时间，根据时间动态调整下一个批次的数量，尽量让每个预览窗口雨露均沾。 3. 状态用了增量数据，每次只发送上次和这次的改变。

@shadowyue 这是把前端的部分摘出来后的测试代码: https://codesandbox.io/p/devbox/youthful-yalow-hfzycq