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

ecbunoof 于 2023-02-14 发布在 Go

关注(0)|答案(2)|浏览(447)

我有一个发送二进制图像的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"的错误。
查看资源选项卡，我看到所有收到的图片都显示出来了。看起来它们在任何时候都不会被删除，即使它们不再显示。
有没有解决这个问题的办法？也许有一种方法可以强制从内存中删除旧图像。

google-chrome

来源：https://stackoverflow.com/questions/22492858/chrome-memory-leak-when-displaying-base64-images

2条答案

按热度按时间

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;
}

赞(0）回复(0）举报 2023-02-14

khbbv19g2#

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

赞(0）回复(0）举报 2023-02-14