高性能界面需求怎么选前端

查看 153|回复 19
lyxxxh2   
传输:原生 websocket 。
60fps 的波形图: 自己找插件,伪造些数据,测试插件是否能 60fps 。
或者 canvas, 不可能 60fps 都画不出来吧。
至于 vue,这跟 vue 没关系吧。
1700 万字节等于大约 16.25 兆字节( MB )。(吐槽 能不能用 kb 或者 mb 作为单位)
服务器带宽也是个问题,可以将数据作为 json 文件,服务器内网上传 oss 。
发送 oss 路径给前端即可。
shadowyue   
canvas 来绘图,后端把图表数据处理好给你直接用,按这个思路试试
laobobo   
#4 +1 ,这玩意应该和框架关系不大,应该是图像渲染方面的,canvas 相对成熟方案较多,WebGPU 出来时间较短,可能差点
erwin985211   
跟框架没一点关系。可以参考无限滚动的实现方式。只渲染用户能看到的部分,就如大家所说的人脑根本处理不了这么多数据。
gbw1992   
一秒 16mb 的数据,感觉压力也没不是很大的说
先假设用前端来做,自己部署一个 influxdb 试试,用自带的面板 1s 一刷新看看效果
Leon6868   
vue 、react 只是来处理 dom 的,你要的渲染和处理这些框架一点都帮不上忙,你应该去了解 canvas 、skia-wasm 这种数据渲染器。而且如此大量的数据根本不可能通过推流推到客户端网页,再在网页端处理。处理思路应该是在服务器端收集数据,解码成简单的波形数据,然后通过 sse 、websocket 实时推送到前端,再在前端展示。
danbai   
上游戏引擎
danbai   
@danbai 每秒接收大概 1700 万字节的数据 肯定需要采样重新取数
ipwx   
少年,1080p 的屏幕,6 张波形图。我们假设一行 3 张,每张波形图一共占据 1920/3 = 640 个像素。
我们假设一个像素上面能显示一根线,那么 640 个像素你能显示 640 个频率的强度,再多了你显示器都没有那么多像素点。那么 640 个频率,每个频率我们假设 32 位采样,也就是 4 个字节。一张图在一个瞬间需要的数据量等于 640 x 4 = 2560 字节。6 张图也就是 2560 * 6 = 15360 字节,也就是 16K 左右。
那么 6 张波形图的一帧,可以被显示器分辨率所显示的信息量只有 16K 。如果算 60 帧,那就是 900K 。
你给的 1700 万字节,约等于 16M 。
所以哪怕不谈绘图,你这里有效的数据量本来就应该不到每秒 1M 。记得把传输效率先优化一下。
weixind   
数据处理肯定要放到后端处理的。js 性能顶不住 17M/s 。上 wasm 不太值得。后端这种采样的解决方案应该会有很多。
渲染的话,600 个波形图算是高性能需求。6 个不算。
您需要登录后才可以回帖 登录 | 立即注册

返回顶部