Chrome或WebView拍照场景下内存泄漏引发程序崩溃问题咨询

云上老周

2026-10-16

问题定位方法

用Chrome DevTools的Memory面板排查：每次完成拍照、清理DOM操作后，分别采集堆快照，对比三次快照的留存对象，重点排查Blob、MediaStream、Image、Canvas类对象的引用计数，确认是否有未释放的对象被全局变量、闭包、事件回调意外持有。
监控相机调用链路内存变化：崩溃发生在点击拍摄瞬间，说明泄漏点大概率出现在相机启动/调用环节而非图片存储环节，重点查看每次调用相机API后，是否有未释放的临时资源。
区分文件大小与内存占用：你提到的单文件200KB是磁盘压缩后的大小，图片加载到内存中是解码后的位图，1080P分辨率的照片单张内存占用就可达8MB左右，远高于文件体积，要以内存监控数据为准。
Xamarin场景可配合Android Studio Profiler查看WebView进程的内存曲线，确认每次拍照后内存是否正常回落，还是持续线性上涨。

修复方案

优先释放相机流资源：绝大多数拍照场景的内存泄漏都来自未正确释放MediaStream对象，每次拍摄完成后，无论是否保留照片，都要第一时间停止所有相机轨道：

// 启动相机时留存stream实例
let currentCameraStream = null;
navigator.mediaDevices.getUserMedia({video: true}).then(stream => {
  currentCameraStream = stream;
  // 绑定到video预览元素的逻辑
})

// 拍摄完成后立即执行释放
function releaseCamera() {
  if (currentCameraStream) {
    currentCameraStream.getTracks().forEach(track => track.stop());
    currentCameraStream = null;
  }
}

补全Blob URL释放逻辑：如果你的预览图是通过URL.createObjectURL()生成的，只删除DOM节点完全无法释放对应的内存，必须在删除节点前主动调用URL.revokeObjectURL()：

const imgContainer = focus.children[0].children[1];
while (imgContainer.firstChild) {
  const child = imgContainer.firstChild;
  // 释放Blob对应的内存
  if (child.tagName === 'IMG' && child.src.startsWith('blob:')) {
    URL.revokeObjectURL(child.src);
  }
  imgContainer.removeChild(child);
}

清理临时对象引用：所有临时存储的base64字符串、Blob实例、Canvas、Image对象，使用完成后直接赋值为null，不要存放在全局变量、闭包、缓存数组中。
如果你是用<input type="file" accept="image/*" capture="camera">调用系统相机，不要复用同一个input实例，每次触发拍照后直接移除旧的input元素，新建一个替换，避免浏览器留存之前的文件引用。
Xamarin侧额外优化：不需要频繁销毁重建WebView，只会额外增加内存开销，可在每次拍摄流程结束后调用webView.clearCache(true)，如果页面无复杂动画可给WebView关闭硬件加速，减少GPU内存占用。
你当前添加的无缓存meta标签对内存泄漏问题无任何帮助，可直接删除。

内容的提问来源于stack exchange，提问作者Toows