javascript大量推送数据如何快速处理?

后端实现了websocket主动推送,现在想在网页上显示推送的数据,但是由于推送的数据量特别庞大,自己的处理比较缓慢,不但造成了数据推送的延迟,页面也特别卡顿,进行点击button等组件的操作也特别卡顿。我在websocket的on_message下是这样处理的:


js是单线程执行的,虽然数据传输是单独的线程,但传输后的数据要占用js执行线程去解析,如果解析过程中同时有layout动作产生,将会以队列方式进行阻塞。要等到释放js线程进入下一个event fire才能有一次webview的更新,所以会产生卡顿。举例来说就像大数据量的页面刷新,在document ready以后就可以对元素进行操作了,但有大资源还在下载,window onload还未完成时进行焦点切换等操作操作也是非常卡顿的。没有做实验,只是从理论上提出一些建议。不要立即使用js处理推送过来的数据,尝试使用local storage等方式先存储数据,避免下载线程和js线程间频繁切换。换用notifications作为推送手段等等。在你数据处理的函数中console一下时间,找出耗时较大的部分进行优化。


 

卡顿即帧率低,要提升帧率就要减少每帧(1s/60)内时间开销比较大的事情。

什么开销大,我猜测你可能做了dom操作(要把数据展示出来),可以尝试把每获得一条数据就展示一次改为获得一定的数据后集中展示一次。这里的关键字有requestAnimationFrame和document fragment。

另外考虑多线程处理,在worker里拼接html字符串甚至拼装virtualDOM也是可以的。

其实最应该说的是要学会如何确定问题究竟出在了哪。打开devtool的timeline仔细分析一下再决定用哪些方法改善。


  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
在实时采集大量运动数据并记录的Spring Boot后台中,可以使用WebSocket来实现长连接。 WebSocket是一种支持双向通信的网络协议,它可以在客户端和服务器之间建立持久的连接,实现实时数据的双向传输。与传统的HTTP请求相比,WebSocket连接可以保持打开状态,从而允许服务器主动向客户端推送数据,而不需要客户端不断地发送请求。 使用WebSocket实现长连接的步骤如下: 1. 在Spring Boot中添加WebSocket支持。您可以使用Spring的WebSocket模块,通过添加相应的依赖和配置来启用WebSocket功能。 2. 创建WebSocket端点(Endpoint)类。您需要编写一个类,继承自Spring的`AbstractWebSocketMessageBrokerConfigurer`或`WebSocketConfigurer`接口,并在其中配置WebSocket相关的细节,如路径、消息处理器等。 3. 编写消息处理器(Message Handler)。您需要定义一个处理器来处理从客户端接收到的消息,并进行相应的处理逻辑。可以根据具体需求,编写自定义的消息处理器。 4. 前端实现WebSocket连接。在前端页面中,使用JavaScript的WebSocket API来与后台建立WebSocket连接,并处理接收到的实时数据。 通过使用WebSocket实现长连接,您可以实时接收运动数据并进行记录。服务器可以主动推送数据给客户端,而不需要客户端频繁地发起请求。这样可以减少网络开销,并提供更实时和高效的数据传输。 需要注意的是,使用WebSocket建立长连接需要考虑服务器的资源管理和负载均衡。在处理大量并发连接和高频数据传输时,您可能需要进行适当的优化和扩展,以确保系统的稳定性和性能。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值