请问在H5列表渲染多个PAG是否有好的优化方案？

[niuhangkai]

目前场景是，在一个列表页面，会有很多的PAG动画需要同时播放，动画存在BMP预合成，每一个大小大概30kb-40kb 。列表可以假设无限长，类似这种布局：

目前在安卓和iOS手机的webview中，会出现卡顿，手机发热等问题，目前已经做的优化方案是仅在可视区域只创建6个PAG实例，其他不可见销毁，但是表现依然不佳，尤其是在快速滚动，有时候会出现webGL context lost报错动画消失，有时候会因为阻塞渲染页面卡顿，想问一下这种情况是否有好的思路来解决？

[kevingpqi123]

PAG Web SDK 不推荐同屏渲染多个 PAGView，主要原因：

1. 浏览器 WebGL context 数量限制：Chrome 最多 16 个，Safari 最多 8 个，超出会导致 WebGL context lost
2. 每个 PAGView 都需要独立的 GPU 渲染环境，内存和 CPU 开销较大
3. BMP 预合成涉及视频解码，比全矢量文件更耗资源

推荐方案：使用 PAGComposition 合并渲染

将多个 PAG 文件添加到一个 PAGComposition 中，只用一个 Canvas 渲染：

// 创建空的 PAGComposition
const composition = await PAG.PAGComposition.make(width, height);

// 添加多个 PAG 文件，通过 setMatrix 设置位置
for (const pagFile of pagFiles) {
  pagFile.setMatrix(matrix);
  composition.addLayer(pagFile);
}

// 只用一个 PAGView 渲染
const pagView = await PAG.PAGView.init(composition, canvas);
pagView.play();

其他优化建议：

1. 尽量使用全矢量素材，避免 BMP 预合成
2. 控制渲染尺寸，移动端实际渲染尺寸建议不超过 2560px
3. 及时调用 destroy() 回收无用的 PAGView 实例

相关文档：https://pag.art/docs/web-sdk/play.html#多个-pagview

[Tu-lele]

@kevingpqi123 大佬看看我这个问题
#3255