后端一次性推送2000万条设备数据，前端如何高效可视化？

积累知识，胜过积蓄金银！毕竟在文章开发的过程中，会遇到各种各样的问题，往往都是一些细节知识点还没有掌握好而导致的，因此基础知识点的积累是很重要的。下面本文《后端一次性推送2000万条设备数据，前端如何高效可视化？》，就带大家讲解一下知识点，若是你对本文感兴趣，或者是想搞懂其中某个知识点，就请你继续往下看吧~

后端一次传过来2000万条数据，前端如何处理

要可视化显示设备数据，但数据量非常大，一小时即可产生上百万条，传过来的JSON 文件更是高达几百兆。

尝试原生HTML、JS、ECharts

原生HTML、JS、ECharts 方法直接将JSON 文件引入渲染，但发现加载时间长达20 秒，并且浏览器会爆内存。

优化建议

1. 策略优化

• 降低采样频率，减少数据量。
• 仅展示 30 秒甚至几分钟内的均值数据，用户放大时再返回 detalle 数据。

2. 优化传输格式

• 使用更具效率的数据传输格式，例如：

  • 将long 保存时间戳，double 保存浮点值（2000 万条数据约为30MB）。
  • 使用 float 和 int 提高精度，2000 万条数据约为 15MB。
  • 利用 ArrayBuffer 和 DataView 对象提取数据。

3. 时间连续性优化

• 如果数据时间连续，则仅需要传输一个起始时间和时间间隔。
• 如果数据不连续，则使用时间间隔和一组起始时间和结束时间来表示。

4. 持续推送更新

• 使用 EventSource 进行持续推送更新。
• 数据格式采用 base64 编码，传输量为原来的 1.33 倍。

其他尝试方案

• iframe：允许数据跨域传输，但可能会出现加载失败的情况。
• 流式处理：一次处理一部分数据，避免内存爆表。
• 流式传输：根据显示范围逐步拉取数据，类似地图瓦片渲染。

综合上述建议，可优化数据处理，提升可视化性能。

今天带大家了解了的相关知识，希望对你有所帮助；关于文章的技术知识我们会一点点深入介绍，欢迎大家关注golang学习网公众号，一起学习编程~