Web 内存泄露-求解：使用 setComposition 去切换 PAG，每次播放完都会增加内存，逐渐就会内存泄露，然后页面白屏，应用就不能使用了

[Wn-1231]

【版本信息】
libpag SDK 版本：4.2.84
ffavc SDK：1.0.2

chrome：108.0.5359.215
electron： 22.3.27

试了好几种方案都存在内存泄露，页面白屏，求解 [抱拳]

方案一：根据官方的 demo ，每次切换 setComposition 前先 pause 和 stop，再 setComposition(newPagFile), 会有内存泄露

方案二：每次播放完毕，掉用 PAGView 的 destroy 去销毁，等待 1s 后（希望他释放内存，但是没用），下次播放再次初始化新的 PAGView ，播放新 PAG ，还是会有内存泄露

• 应用刚打开内存 200MB
  

• 疯狂播放 PAG 后到 800MB => 1000MB ，超出 1G 后内存泄露白屏

• 链接：https://pica.zhimg.com/v2-51541d7799dd1bbde755bbe845ca07df.png
  

• 视频链接：https://zhstatic.zhihu.com/vip-fe/live/06cdabf5b00c5329e882f568b00732a2.mov

方案一 代码，也是上图使用代码

  const initialize = async (buffer: ArrayBuffer) => {
      console.log('initialize');
      try {
        if (timerRef.current) {
          clearTimeout(timerRef.current);
          timerRef.current = null;
        }

        // 重置状态
        isAnimationEndedRef.current = false;

        const { pag, ffavc } = await PAGInitializer.getInstance().getRuntime();

        if (isRegisterSoftwareDecoderFactory) {
          pag.registerSoftwareDecoderFactory(ffavc);
        }

        // 加载新的 PAGFile
        const newPagFile = await pag.PAGFile.load(buffer);
        pagFileRef.current = newPagFile;

        const canvas = canvasRef.current!;

        // 如果 pagView 不存在，则创建新的实例
        if (!pagViewRef.current) {
          console.log('创建新的实例');
          canvas.width = newPagFile.width();
          canvas.height = newPagFile.height();

          const pagViewInstance = await pag.PAGView.init(newPagFile, canvas, {
            firstFrame: false,
            useCanvas2D: true,
            useScale: false,
          });

          if (pagViewInstance) {
            pagViewRef.current = pagViewInstance;
            pagViewRef.current.removeListener(
              'onAnimationEnd',
              onAnimationEndHandler,
            );
            pagViewRef.current.addListener(
              'onAnimationEnd',
              onAnimationEndHandler,
            );
          }
          pagViewRef.current?.setRepeatCount(loop ? 0 : 1);
        } else {
          console.log('切换动画');
          // 如果 pagView 已存在，使用 setComposition 切换动画
          pagViewRef.current.pause();
          await pagViewRef.current.stop();
          await pagViewRef.current.setComposition(newPagFile);
          pagViewRef.current?.setRepeatCount(loop ? 0 : 1);
          pagViewRef.current?.setProgress(0);
        }

        if (autoplay) {
          await pagViewRef.current?.play();
        }

        initialized?.();

        // 设置超时计时器
        timerRef.current = setTimeout(() => {
          if (!isAnimationEndedRef.current) {
            console.log('Animation ended by timeout');
            onAnimationEndHandler();
          }
        }, timeout);
      } catch (error: any) {
        logger.error('动画资源加载失败', error);
      }
    };

[wendyXu0318]

你试一下销毁后将canvas也销毁，就不会泄露了。

[jinwuwu001]

请用最新版本确认下该问题是否还存在，若存在请描述下复现场景和路径

[jinwuwu001]

该问题长时间未更新，暂时先关闭，后续有补充可以重新打开。