iOS Safari持续拍照时Nuxt.js(SPA)应用崩溃（疑似内存泄漏）问题求助

内存泄漏修复&避免崩溃方案 #

1. 显式释放图片相关资源

• 所有预览图优先用URL.createObjectURL()生成临时链接渲染，不用Base64格式存储/展示，每次图片替换、批量提交完成后，立刻调用URL.revokeObjectURL(临时链接)销毁资源，同时将对应Image对象、Blob引用赋值为null。
• browser-image-compression底层依赖Canvas做压缩，每次压缩完成后手动将用到的Canvas实例宽高设为0清空内容，解除所有对Canvas、Image实例的引用。
• 压缩后的图片不要存在Vue的响应式数据中，Vue2的响应式监听会额外持有资源引用导致GC无法回收，可将存储数组通过Object.freeze()冻结避免响应式监听，或直接存在非响应式变量（如this.$options下）。

2. 调整压缩库配置

• 开启useWebWorker配置项，将压缩任务放到独立WebWorker中执行，压缩完成后Worker自动销毁，不会占用主线程内存。
• 关闭preserveExif配置，不需要保留照片元信息的情况下直接移除Exif数据，减少单张图片的内存占用。

3. 优化批量提交逻辑

• 避免一次性在内存中留存20张完整压缩图，可改为拍一张压缩一张就上传到后端暂存，最终提交时仅关联暂存ID即可，完全避免大量图片堆存内存的问题。
• 若必须全部拍完再提交，可将压缩后的Blob存入IndexedDB，内存中最多留存5张当前需要展示的预览图，其余需要展示时再从IndexedDB读取，不用时立刻解除引用。

4. Safari适配优化

• 不要用location.reload(true)释放内存，Safari移动端对未显式销毁的资源不会在刷新时立刻回收，正确的清理顺序是：先清空所有存储图片的数组、所有资源引用设为null、所有预览img标签的src设为空字符串，等待1~2秒后调用$router.go(0)刷新，资源释放效果更彻底。
• 页面的beforeDestroy钩子中加入统一的资源清理逻辑，每次退出当前页面/提交完成后主动触发清理。

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