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

[southcat996]

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

[ipwx]

https://codepen.io/qhcbirud-the-flexboxer/pen/zYQEdOd

2048 个柱子。

[okakuyang]

....前端 vue ，但是可以用原生 js 啊，不清楚你波形图要画成什么样子，但是跑个 50 帧应该没问题。

[danbai]

@ipwx #21 https://codepen.io/danbai225/pen/zYQEdop
这样好多了

[kneo]

一个波形图有必要 60 帧？你眼睛多快啊？难道你们在开发一个反应速度游戏吗？比如某模式模型图出现 10ms 内不按按钮就爆炸？

[ck65]

这调研/产品设计粒度也太粗了，咋从 raw data 一步跳到 UI library 去了。。

[xiangyuecn]

海量数据的基本处事原则：你糊弄我 我糊弄你。没人会去一个数据一个数据去对的 只要不是偏的离谱就行 尤其是这种画图的 有个大概的曲线就成 搞定 打钱

[thtznet]

说句实话，这个需求偏工业化，在 C#平台里好像不是很难的事情。另外为啥说到前端一定等于 WEB ？ C/S Client 也可以是前端啊。

[ajaxgoldfish]

态势相关的？就是 cesium +echarts ？军工 BS ？如果相关的话这个领导是半瓶子醋

[ajaxgoldfish]

为什么这么说呢，因为我也曾经也遇到过。主要渲染引擎出来的数据。

[Adelell]

服务端直接渲染成视频流发给浏览器，浏览器就是个视频播放器。

[lm930129]

我理解，应该是后端是个物联网系统，每秒收到 1700 万字节的数据，然后这个数据后端要处理成 6 个波形图，然后前端 60 帧的刷新率来刷新拿数据，如果是这样，应该前端压力不大吧，就是用 websocket 每 15 毫秒这样刷新一下数据。我觉得，压力最大的在后端。

[asdjgfr]

我觉得六楼说得对，瓶颈不在渲染上，应该是数据解析的问题，看看有没有 cpu 密集型的任务，比如要转换每条数据里的日期之类的

[hi2hi]

楼主应该不是前端；；； vue （包括 react 这些）只是一个开发工具，她是开发人员提升效率的工具，而不是浏览器的性能瓶颈（框架瓶颈确实有，但有优化方案，不在这个讨论范围）。
1700 万字节只是数据量，单纯在其中进行数据调用，问题不大；；性能瓶颈会卡在数据汇总和数据索引这部分，哪怕你要求渲染到 120 帧，但也只是展示一秒的数据，这里的 60 帧只是视觉上的丝滑（浏览器在这方面并不一定靠谱，想要稳定的渲染：1 ）他们说的方案，直接输出视频； 2 ）一个好的渲染引擎；

[LLaMA2]

方法总比困难多！！！


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



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

数据传输时是否有非必要的数据，能否预处理，能否压缩传输，感觉制约你的是这 17000 万 Byte

[realJamespond]

数据量大和前端没关系，数据要后端处理过最后再通过 websocket 发到前端 canvas 展示

[southcat996]

@lm930129 是个示波器，目前就是后端给前端的数据就是每秒 1700 万字节，目前选 qt 去做，但是我们这边都不大会 qt

[douxc]

服务端 ffmpeg 推流，前端直接 video 播放视频？直播？

[ipwx]

@southcat996 你用 C++ 写个服务器把它降采样到合适的码率再推给 Vue 呗。

[kkhaike]

vue offscreencanvas + worker 可以做到

[tzxxxx]

后端应该先根据预期的显示尺寸降采样，计算压缩显示结果，再给前端显示，主要的处理在后端