PixiJS 中 Canvas 文本渲染器分辨率切换的缓存问题解析

在 PixiJS 8.3.4 版本中，开发者发现了一个与 Canvas 文本渲染和分辨率切换相关的核心问题。当应用中曾经创建并渲染过文本对象，随后销毁该对象，再尝试修改渲染器分辨率时，会导致应用崩溃。

问题现象

具体表现为：在文本对象被销毁后，调用 app.renderer.resolution 设置新分辨率时，控制台会抛出 Uncaught TypeError: gpuText is null 错误。这个问题在 Chromium 和 Firefox 浏览器上都能稳定复现。

技术背景

PixiJS 的 Canvas 文本渲染管线使用了一个缓存系统来优化性能。当创建文本对象时，系统会生成对应的 GPU 纹理并缓存起来。这个缓存机制通过 CanvasTextPipe 类实现，内部维护了一个 _gpuText 对象来存储这些缓存。

问题根源

深入分析代码后发现，问题出在缓存清理机制上。当文本对象被销毁时，系统只是将缓存中的对应条目设置为 null，而没有完全删除该键值对。而当分辨率发生变化时，渲染器会尝试遍历并更新所有缓存的文本纹理，包括那些已经被标记为 null 的条目，从而导致了空指针异常。

解决方案

正确的做法应该是在文本销毁时完全删除缓存条目，而不是仅仅将其置为 null。具体修改方案是将：

this._gpuText[textUid] = null;

改为：

delete this._gpuText[textUid];

这种修改确保了当分辨率变化时，系统不会尝试访问已经不存在的缓存条目。

潜在影响

值得注意的是，这种缓存管理方式在 PixiJS 中并非孤例。代码库中可能存在多处类似的实现模式，都可能面临相同的问题。开发者在使用 PixiJS 时，如果遇到类似的分辨率切换或缓存相关的问题，可以参考这个案例进行排查。

最佳实践

对于使用 PixiJS 的开发者，建议：

1. 在修改渲染器分辨率前，确保所有文本对象都处于有效状态或已被正确销毁
2. 关注 PixiJS 的更新日志，查看此问题是否在后续版本中得到修复
3. 如果需要在运行时频繁切换分辨率，可以考虑实现自定义的文本缓存管理

这个问题虽然看似简单，但它揭示了缓存管理在图形渲染系统中的重要性，特别是在涉及资源销毁和系统参数变更的场景下。