Chrome:显示base64图像时内存泄漏

ecbunoof  于 2023-02-14  发布在  Go
关注(0)|答案(2)|浏览(442)

我有一个发送二进制图像的websocket。我的脚本获取这些图像,转换为base64并显示在一个标记中。
大概是这样的

websocket.onmessage = function(evt) {
    var msg = evt.data;

    var image = $('.my-image')
    image.attr('src', "data:image/jpeg;base64,"+ toBase64(msg))
}

这似乎导致了Chrome的内存泄漏,几分钟后它就会轻松使用超过1GB的RAM,几个小时后我就得到了"Aw,Snap"的错误。
查看资源选项卡,我看到所有收到的图片都显示出来了。看起来它们在任何时候都不会被删除,即使它们不再显示。
有没有解决这个问题的办法?也许有一种方法可以强制从内存中删除旧图像。

gcuhipw9

gcuhipw91#

我也曾被同样的问题困扰过,浏览器内存使用量不断上升,结果发现这不是内存泄漏,而是浏览器缓存图像的副作用。
@metal03326在https://stackoverflow.com/a/38788279/1510289上提供了一个解决方案,其思想是,
1.将图像字节写入JavaScript Blob,
1.从该二进制大对象创建唯一对象URL,
1.在src属性中使用唯一的对象URL,最后
1.在完成释放内存时撤销对象URL。
下面是代码:

function getBlob(byteString, mimeString) {
  var ab = new ArrayBuffer(byteString.length);
  var ia = new Uint8Array(ab);
  for (var i = 0; i < byteString.length; i++) {
    ia[i] = byteString.charCodeAt(i);
  }
  var blob = new Blob([ab], {type: mimeString});
  return blob;
}

let prevObjectURL = null;

websocket.onmessage = function(event) {
  var blob = getBlob(atob(event.image), 'image/jpg');
  var objectURL = URL.createObjectURL(blob);
  $('.my-image').attr('src', objectURL);
  URL.revokeObjectURL(prevObjectURL);
  prevObjectURL = objectURL;
}
khbbv19g

khbbv19g2#

将图像base64保存在临时变量中,并将info替换为null。

相关问题