基于pixi.js的Chrome游戏内存足迹飙升，JS/GPU内存稳定，如何排查？

我开发了一款基于pixi.js（v7+）的浏览器游戏，大量使用Graphics对象。在Chrome（v121，Apple Silicon，MacOS 12.7.1）任务管理器中，Memory Footprint数值持续攀升至数GB，最终导致标签页崩溃。

但多个关键内存指标均未显示异常：

• performance.memory.usedJSHeapSize仅约30MB
• Chrome任务管理器中（需右键列头启用对应列）的JavaScript Memory和GPU Memory数值处于低位
• Chrome开发者工具「更多工具」中的性能监视器显示：Dom节点、JS事件监听器、堆内存等指标均无增长

排查过程 #

先后排查了所有游戏对象生命周期的引用释放逻辑，尝试更换不同版本的pixi.js、移除所有自定义着色器等操作，均无法解决内存暴涨问题。

问题根源 #

最终定位问题出在AudioNodes上：Chrome开发者工具完全未统计AudioNodes及WebAudio相关工作线程/进程的内存占用。

具体原因是：为实现混响效果实例化新ConvolverNode时，未将旧节点从所有输入输出连接链中完全断开，导致旧节点无法被垃圾回收。通过MacOS活动监视器的「Sample Process」功能，发现大量名为「Reverb convolution background thread」的线程，从而锁定了问题。

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