当前位置: 首页 > 知识库问答 >
问题:

前端 - 如何解决 通过WebSocket 大量数据更新散点图导致的页面卡顿问题?

曾明诚
2023-12-26

echarts通过websocket频繁更新散点图数据,数据量大的时候达到三四千左右,页面出现卡顿现象,鼠标一直在转。无法准确选中数据tooltip,页面卡死。

版本更新到最新版,页面销毁清除均无效

共有1个答案

颛孙国源
2023-12-26

几千个点的数据量还不算大,之前我们项目上用 echarts5 渲染几万个点都没问题。主要两个优化点吧

  • 开启大规模模式
    image.png
  • 使用 appendData 进行增量渲染,特别像 websocket 这种以增量的方式推数据的场景,优化效果特别明显。
    https://echarts.apache.org/zh/api.html#echartsInstance.append...
    image.png
 类似资料:
  • websocket会实时发送大量数据时,我目前写的这些代码,会导致页面卡顿,性能优化我不知道怎么下手了,求大佬指教一下, 有偿。谢谢大佬们

  • 本文向大家介绍vue大数据表格卡顿问题的完美解决方案,包括了vue大数据表格卡顿问题的完美解决方案的使用技巧和注意事项,需要的朋友参考一下 前言 vue渲染小数据挺快,大数据vue开始出现卡顿现象,本文讲给大家详细介绍关于vue大数据表格卡顿问题的解决方法 点我在线体验Demo(请用电脑查看) 亲测苹果电脑,chrome浏览器无卡顿现象,其它浏览器并未测试,如遇到卡顿请备注系统和浏览器,方便我后续

  • 本文向大家介绍IOS 解决UIButton 点击卡顿/延迟的问题,包括了IOS 解决UIButton 点击卡顿/延迟的问题的使用技巧和注意事项,需要的朋友参考一下 前言   一开始还以为代码写的有问题,点击事件里面有比较耗时卡主线程的代码,逐一删减代码发现并不是这么回事。 正文   和参考文章里说的情况不完全相同,UIButton 并没有放在 UIScrollView 或 UITableView

  • 本文向大家介绍vuex页面刷新导致数据丢失的解决方案,包括了vuex页面刷新导致数据丢失的解决方案的使用技巧和注意事项,需要的朋友参考一下 解决vuex页面刷新导致数据丢失问题 vuex数据是存在内存当中,当页面刷新之后vuex数据自然会丢失。我们有两种方法解决该问题: 1.使用vuex-along 2.使用localStorage或者sessionStroage 1.使用vuex-along v

  • 火狐浏览器是符合预期的,没有卡顿;就谷歌不对劲;能删除的代码都删除试过了,也没找到原因。 主要是问问有没有遇到类似情况的。代码不好提供.. 这是性能分析报告,不知道对各位查找问题有没有帮助 链接:https://pan.baidu.com/s/1HW_3XcKbZxlSxt11JD2tkw?pwd=07ry 提取码:07ry

  • 本文向大家介绍iOS中3DTouch预览导致TableView滑动卡顿问题解决的方法,包括了iOS中3DTouch预览导致TableView滑动卡顿问题解决的方法的使用技巧和注意事项,需要的朋友参考一下 1.发现问题 今天一早来公司,一个同事举着他的6p对我们说:“你看看这是嘛啊...怎么划不动啊...”我一看,果然,滑两下TableView,大概加载2页多就卡飞了...顿时想以是他机子太老了,物