使用CCapture.js批量生成GIF时大量worker未释放导致页面崩溃如何解决

核心问题原因 #

你当前代码的两个核心问题：

1. 同步循环直接创建100个生成任务同时运行，大量worker瞬间被创建，远超过浏览器承载上限
2. CCapture没有自动销毁底层gif.js实例的worker，生成完成后worker持续驻留内存

可行修复方案 #

方案1：改串行生成+手动销毁worker（成本最低，无需改库源码） #

将同步循环改为异步串行执行，单个GIF生成完成、销毁资源后再执行下一个，同时手动调用gif.js的销毁接口清理worker，示例代码如下：

// 封装单个GIF生成任务
async function generateOneGif() {
  return new Promise((resolve) => {
    const capturer = new CCapture({
      framerate: 10,
      format: "gif",
      workersPath: "js/",
      workers: 2 // 固定底层worker数量，避免单任务开过多worker
    });

    capturer.start();
    for (let currentFrame = 0; currentFrame < totalFrames; currentFrame++) {
      this.gifRender(currentFrame / totalFrames);
      capturer.capture(canvas);
    }
    capturer.stop();

    // save方法传入回调，生成完成后清理资源
    capturer.save((blob) => {
      // 此处可自行处理blob，比如触发下载或存储
      // 手动销毁底层gif实例的所有worker
      if (capturer._gif) {
        capturer._gif.terminate();
      }
      // 解除引用方便垃圾回收
      capturer = null;
      resolve();
    });
  })
}

// 串行批量生成
async function batchGen(count = 100) {
  for(let i = 0; i < count; i++) {
    await generateOneGif();
  }
  console.log('全部生成完成')
}

// 调用启动
batchGen()

方案2：修改CCapture源码适配批量场景（适合长期使用） #

如果需要更高的复用性，可以直接修改CCapture的gif格式实现逻辑：

1. 给GIF的handler类添加destroy方法，内部调用this.gif.terminate()清理worker
2. 可选：全局复用同一个gif.js实例，每次生成完成后重置实例状态，避免反复创建销毁worker的开销

方案3：控制并发数提升生成效率 #

如果设备性能够，可以用异步队列控制同时运行的任务数，比如同时跑2-3个生成任务，既提升效率又不会导致worker过多。

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