PIXIJS AJAX切换应用时同名纹理缓存未清除解决方案咨询

PIXIJS多应用切换资源缓存问题解决方案 #

你之前的清理逻辑存在几个核心问题：销毁顺序错误、未正确销毁纹理实例直接清空缓存对象、时间戳拼接逻辑有缺陷、Loader实例复用残留记录，可按以下步骤修正：

第一步：修正资源清理逻辑 #

调整销毁顺序，先销毁应用实例再清理缓存，必须遍历销毁每个纹理实例再清空缓存对象，不要复用全局Loader实例，每次切换新建Loader更彻底：

if (app) {
  // 先销毁应用实例，释放所有绑定的资源引用
  app.destroy({
    children: true,
    texture: true,
    baseTexture: true
  });
  app = null;
}

// 遍历销毁所有纹理实例，避免PIXI内部持有残留引用
for (const textureKey in PIXI.utils.TextureCache) {
  const texture = PIXI.Texture.removeFromCache(textureKey);
  if (texture && !texture.destroyed) {
    texture.destroy(true);
  }
}
for (const baseTextureKey in PIXI.utils.BaseTextureCache) {
  const baseTexture = PIXI.utils.BaseTextureCache[baseTextureKey];
  if (baseTexture && !baseTexture.destroyed) {
    baseTexture.destroy(true);
  }
}

// 清空缓存对象
PIXI.utils.TextureCache = {};
PIXI.utils.BaseTextureCache = {};

// 每次切换直接新建Loader实例，比reset清理更彻底
loader = new PIXI.Loader();
loader.resources = {};

第二步：修正时间戳拼接逻辑 #

原有拼接逻辑未处理URL已带查询参数的场景，会导致时间戳不生效，修正如下：

let add = function (arr) {
  if (loader.loading) return;
  const timestamp = new Date().getTime();
  for (var i in arr) {
    let url = arr[i];
    // 兼容已有查询参数的URL
    url += url.includes('?') ? '&' : '?';
    url += `t=${timestamp}`;
    loader.add(i, url);
  }
};

第三步：调整AJAX加载逻辑 #

全局禁用jQuery AJAX缓存，避免加载的应用内容被浏览器缓存：

// 全局设置jQuery禁用AJAX缓存
$.ajaxSetup({
  cache: false
});

$.get(href, function (data) {
  // 先执行上述清理逻辑，再初始化新应用
  // 新应用初始化代码
});

异常排查 #

如果调整后仍有问题，打开浏览器开发者工具网络面板，勾选「禁用缓存」后复现操作：

• 确认图片请求是否携带了新的时间戳参数，状态码是否为200而非304
• 如果出现304，检查服务端静态资源配置是否强制忽略URL查询参数，可调整为在路径中加入随机串而非查询参数规避

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