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

2024-06-11 17:11:58 +08:00
 southcat996

公司有个项目,每秒接收大概 1700 万字节的数据,会分成六个波形图,要求客户端能维持 60 帧,目前公司前端只有 vue,调研了下好像用 vue 没办法做到

5213 次点击
所在节点    程序员
40 条回复
ipwx
2024-06-11 18:42:10 +08:00
okakuyang
2024-06-11 18:43:43 +08:00
....前端 vue ,但是可以用原生 js 啊,不清楚你波形图要画成什么样子,但是跑个 50 帧应该没问题。
danbai
2024-06-11 19:00:37 +08:00
kneo
2024-06-11 20:10:20 +08:00
一个波形图有必要 60 帧?你眼睛多快啊?难道你们在开发一个反应速度游戏吗?比如某模式模型图出现 10ms 内不按按钮就爆炸?
mogita
2024-06-11 20:13:44 +08:00
这调研/产品设计粒度也太粗了,咋从 raw data 一步跳到 UI library 去了。。
xiangyuecn
2024-06-11 20:25:06 +08:00
海量数据的基本处事原则:你糊弄我 我糊弄你。没人会去一个数据一个数据去对的 只要不是偏的离谱就行 尤其是这种画图的 有个大概的曲线就成 搞定 打钱
thtznet
2024-06-11 21:00:05 +08:00
说句实话,这个需求偏工业化,在 C#平台里好像不是很难的事情。另外为啥说到前端一定等于 WEB ? C/S Client 也可以是前端啊。
ih8es9OIzne0959p
2024-06-11 21:07:45 +08:00
态势相关的?就是 cesium +echarts ?军工 BS ?如果相关的话这个领导是半瓶子醋
ih8es9OIzne0959p
2024-06-11 21:09:37 +08:00
为什么这么说呢,因为我也曾经也遇到过。主要渲染引擎出来的数据。
Adelell
2024-06-12 02:31:13 +08:00
服务端直接渲染成视频流发给浏览器,浏览器就是个视频播放器。
lm930129
2024-06-12 09:16:34 +08:00
我理解,应该是后端是个物联网系统,每秒收到 1700 万字节的数据,然后这个数据后端要处理成 6 个波形图,然后前端 60 帧的刷新率来刷新拿数据,如果是这样,应该前端压力不大吧,就是用 websocket 每 15 毫秒这样刷新一下数据。我觉得,压力最大的在后端。
asdjgfr
2024-06-12 09:21:26 +08:00
我觉得六楼说得对,瓶颈不在渲染上,应该是数据解析的问题,看看有没有 cpu 密集型的任务,比如要转换每条数据里的日期之类的
hi2hi
2024-06-12 09:37:50 +08:00
楼主应该不是前端;;; vue (包括 react 这些)只是一个开发工具,她是开发人员提升效率的工具,而不是浏览器的性能瓶颈(框架瓶颈确实有,但有优化方案,不在这个讨论范围)。
1700 万字节只是数据量,单纯在其中进行数据调用,问题不大;;性能瓶颈会卡在数据汇总和数据索引这部分,哪怕你要求渲染到 120 帧,但也只是展示一秒的数据,这里的 60 帧只是视觉上的丝滑(浏览器在这方面并不一定靠谱,想要稳定的渲染:1 )他们说的方案,直接输出视频; 2 )一个好的渲染引擎;
LLaMA2
2024-06-12 10:26:16 +08:00
方法总比困难多!!!


1.客户测能否接受插件?
2.绘制后的波形图是否由后续交互(点击波形图有其他功能,举例而已)?
3.波形图的显示和数据生产方是否要尽可能低的延迟,能接受的最大延迟是多少?
4.客户测使用的设备类型?设备是否能够配合项目保证最低性能线



如果能接受插件,
那就将数据接受处理放到插件中计算,
计算后在本地启动 websocket,然后启动网页连接本地的 websocket 通讯,
前端真的只是展示!,甚至于 v 友提到的合成视频播放都可以

数据传输时是否有非必要的数据,能否预处理,能否压缩传输,感觉制约你的是这 17000 万 Byte
realJamespond
2024-06-12 11:16:37 +08:00
数据量大和前端没关系,数据要后端处理过最后再通过 websocket 发到前端 canvas 展示
southcat996
2024-06-12 11:35:26 +08:00
@lm930129 是个示波器,目前就是后端给前端的数据就是每秒 1700 万字节,目前选 qt 去做,但是我们这边都不大会 qt
douxc
2024-06-12 12:22:15 +08:00
服务端 ffmpeg 推流,前端直接 video 播放视频?直播?
ipwx
2024-06-13 11:23:53 +08:00
@southcat996 你用 C++ 写个服务器把它降采样到合适的码率再推给 Vue 呗。
kkhaike
2024-06-13 12:06:04 +08:00
vue offscreencanvas + worker 可以做到
tzxxxx
2024-06-13 12:47:46 +08:00
后端应该先根据预期的显示尺寸降采样,计算压缩显示结果,再给前端显示,主要的处理在后端

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

https://ex.noerr.eu.org/t/1048638

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

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

© 2021 V2EX