gif.js生成GIF时Blob堆积占用浏览器内存导致崩溃的解决方法问询

gif.js的内存泄漏本质是生成GIF Blob并创建临时URL后，没有主动释放URL对应的内存绑定，以下方案均在业务层实现，无需修改库源码：

• 方案1：监听实例事件，手动管理资源
  gif.js实例生成完成后会触发finished事件，回调中会返回生成的Blob对象和对应的临时URL，你可以统一存储这些资源，在不需要使用时主动释放：

  // 统一存储已生成的GIF资源
  const generatedGifAssets = []
  
  // 初始化gif实例
  const gifInstance = new GIF({
    // 你的配置项
    workers: 2,
    quality: 10
  })
  
  // 监听生成完成事件
  gifInstance.on('finished', (blob, url) => {
    // 存入资源列表便于后续清理
    generatedGifAssets.push({ blob, url })
    // 业务逻辑：比如展示GIF、触发下载等
    // document.getElementById('resultImg').src = url
  })
  
  // 清理旧资源的方法，可在重新生成前、批量生成间隙、所有任务完成后调用
  function clearExpiredGifAssets() {
    generatedGifAssets.forEach(asset => {
      // 释放Blob URL绑定的内存
      URL.revokeObjectURL(asset.url)
    })
    // 清空数组，释放Blob的引用，等待浏览器垃圾回收
    generatedGifAssets.length = 0
  }
  

• 方案2：全局拦截自动管理，无需修改现有GIF生成逻辑
  如果你已经写了大量GIF生成的业务代码，不想逐个修改实例绑定，可以全局轻量拦截Blob URL的创建逻辑，自动收集gif.js生成的资源：

  const originalCreateObjectURL = URL.createObjectURL
  const gifBlobUrlSet = new Set()
  
  // 重写创建方法，自动收集GIF类型的Blob URL
  URL.createObjectURL = function(blob) {
    const url = originalCreateObjectURL.call(this, blob)
    if (blob.type === 'image/gif') {
      gifBlobUrlSet.add(url)
    }
    return url
  }
  
  // 全局清理方法，调用即可释放所有堆积的GIF Blob资源
  function clearAllGifBlobMemory() {
    gifBlobUrlSet.forEach(url => URL.revokeObjectURL(url))
    gifBlobUrlSet.clear()
  }
  

• 批量生成场景优化建议
  如果需要生成上百个大体积GIF，可每完成3-5个GIF的生成、导出逻辑后就调用一次清理方法，或者单个GIF处理完成后立刻清理对应资源，避免内存持续上涨到临界值导致页面崩溃。

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