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

16 天前
 lurenjiaMAX

程序是这样的:

问题有这些:

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

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

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

但是性能却非常糟糕.

1624 次点击
所在节点    问与答
34 条回复
paopjian
16 天前
好家伙,每秒 96*3 的数据还要时时绘图?这不现实吧,前端折线图这种每次改数据是要重新计算的,你这算得过来吗
miloooz
16 天前
echarts 的大数据量绘图还可以啊 。
通道数据在绘图时 是追加到原有数据还是覆盖了所有数据额，覆盖可能会有性能问题，追加的话会好很多。
miloooz
16 天前
https://echarts.apache.org/zh/api.html#echartsInstance.setOption
不过我没做过这么大数据量的测试，你可以试试看哈
shadowyue
16 天前
你说的性能糟糕具体指什么现象
shadowyue
16 天前
你不如直接丢一份测试数据出来，还有设计图
crazyBlack
16 天前
首先肯定是一起发好，减少连接数

你这数据量到底有多大，能碰到绘图库的性能上限，你先确认一下是数据存的太大内存顶不住了，还是点太多绘制上去有问题，如果是绘制的问题正常的库都会有给数据抽稀的方法，过大的数据直接绘制上去意义不大，我盲猜是数据量过大存不住了，你可以研究一下接一层 bff 做数据整合和抽稀，或者交给后端做

然后前后端分离和追求性能不冲突，如果你觉得是交给客户端的计算量过大可以试试尽量把计算放在 worker 里或者考虑 next 或者 remix 这样的服务端渲染框架
crazyBlack
16 天前
我才看到技术栈里还有个 tauri ，next 或者 remix 当我没说，生产敢用这东西的都是个猛人，打扰了
andyskaura
16 天前
1.都差不多，但只要前端的主线程没出现堵塞，一起发送更好。websocket 会自己分片，ipc （我不知道你前端的什么 ipc ，只说 electron 的 ipc ）大数据会有一定延迟（ 4k 的 bmp 会有 200ms 左右延迟），但预估你数据量还没那么大。
2.别用 svg ，用 canvas ，绘图的渲染性能都没什么压力的，毕竟都只是 2d 的。我猜测问题可能出在数据处理上，可以用帧循环来将 96 个数据排序提交，减小并发。用 woker 或者 wasm 来优化处理，无论怎样，千万别让主线程卡住了。
3.感觉前后端分不分离和性能没啥联系。

最好还是把问题现象描述的清楚一点，主要不好分析出现在堵在哪儿了
chairuosen
16 天前
不用 UI 框架的内置 state ，直接调用绘图框架的更新方法更新，绘图框架最好是 canvas 的，这样就只有数据计算过程，没有 vdom 的更新
lurenjiaMAX
16 天前
@shadowyue 好的 我后面收拾一下代码 做一个最小可运行实例分享出来
thulof
16 天前
你是不是每次都全量重绘的…… 只追加 delta 就好了吧
sgiyy
16 天前
你要把你的效果图和具体数据量大小放出来才好评估
thulof
16 天前
@thulof #11 哦不对，仔细看了下是折线图，那确实需要全量重绘。那考虑下分片分批处理吧
lurenjiaMAX
16 天前
@sgiyy 效果图是这样的 ![图片]( )
Moierby
16 天前
我做过一个页面 30 个折线和柱状图的需求，直接一次性请求过来一把梭，用的 echarts ，基本没有明显卡顿。不过我的绘图数据比较小，每张 chart 上也就几十个节点。
现在流行的 chart 库都是用 canvas 实现的，每次绘制都是清理完之前的图层，重算重绘，也就是图表渲染这一步你基本没有什么可优化的空间。
你看一下你的瓶颈在哪，针对性的优化：
如果数据请求太慢，你就不要一个接口一次性返回所有 data ；
如果单个 chart 数据节点太多，一次性绘制 96 个太占资源，你就判断哪些出现在当前 viewport 才绘制哪个
lurenjiaMAX
16 天前
@crazyBlack 数据量没有多少 就是每隔一秒获取一次最新的数据 增量更新
MRG0
16 天前
一次性显示 96 个，这眼睛看的过来吗
lurenjiaMAX
16 天前
@Moierby 这是个好主意! 我测试只显示 4 个图的话是没有多大压力的
horizon
16 天前
先 measure ，再优化
moooooooo
16 天前
为什么要一次显示 96 个....一点交互都不讲究的？

这是一个专为移动设备优化的页面（即为了让你能够在 Google 搜索结果里秒开这个页面），如果你希望参与 V2EX 社区的讨论，你可以继续到 V2EX 上打开本讨论主题的完整版本。

https://tanronggui.xyz/t/1107258

V2EX 是创意工作者们的社区，是一个分享自己正在做的有趣事物、交流想法，可以遇见新朋友甚至新机会的地方。

V2EX is a community of developers, designers and creative people.

© 2021 V2EX