起因
由于项目是需要连续传输图片形成一个伪视频(没办法,客户钱给的不够)来观看。后端采用传输 base64 的图片到前端展示。
环境
php: 7.2
workerman: 3.X
vue: 2.X
过程
workerman 与树莓派进行 socket 连接,树莓派通过摄像头将视频截取为一张张的图片发送到 workerman,workerman 再将图片转为 base64 的格式通过 websocket 传输到前端 vue。vue 接收到消息后将 base64 赋值到变量中。
<img src="'data:image/png;base64,'+videobox.image" > var vm = new Vue({ data: { videobox: { image: "", } }, method: { getImage: function(data) { this.videobox.image = data.image } } })
由于后端会一直传输 base64 格式的图片到 vue 上,所以 video.image 会不断的刷新,但是内存却忽然间爆涨了起来
一张图片才几十 k,内存却几秒钟涨到了 G 的级别,所以怀疑是内存泄漏了。
查阅了文档后发现 异步队列更新
也就是说每一次的数据更新都会进入到队列中,并且缓存了起来..... 所以我的内存才爆涨了起来。。
解决方案也有,就是采用 $nextTick () 方法来刷新队列。。
<img src="'data:image/png;base64,'+videobox.image" > var vm = new Vue({ data: { videobox: { image: "", } }, method: { getImage: function(data) { this.$nextTick(function() { this.videobox.image = data.image }); } } })
修改代码后内存再也没有上过 G 级别了。。
© 著作权归作者所有
举报
发表评论
0/200