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仔细分析一下再决定用哪些方法改善。


评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值