Chromium图形资源预加载异常求助：complete标识与GET请求异常

我们当前采用的动态图片预加载流程是：

• 声明Image对象
• 绑定onload处理函数
• 设置src指定资源地址
• 检查complete属性判断是否命中缓存（命中时onload不会触发）

但在Chromium内核浏览器中出现偶发异常：缓存中的图片complete属性未被正确设置，或者浏览器直接不发送GET请求；清除DevTools网络面板后偶尔恢复正常。即使做了重试、滑动窗口等优化，仍无法彻底解决，Wireshark确认确实未发送请求，还存在请求延迟60秒以上、重复请求同一资源的情况，服务器端无异常。

针对这类问题，可从以下方向尝试解决：

1. 调整事件绑定与资源加载的顺序逻辑 #

当前代码中先设置src再检查complete，但Chromium的资源加载异步逻辑可能导致时序问题。建议：

• 先绑定onload、onerror、onabort所有事件，再设置src
• 延迟检查complete属性（比如用setTimeout延迟10-50ms），避免资源加载状态还未同步到DOM属性

改进后的示例代码：

this.mImageURLs[i].lastTry = now;
let item = new Image();
// 先绑定所有事件
item.onload = this.assetLoaded.bind(this, this.mImageURLs[i]);
item.onerror = this.assetFailed.bind(this, this.mImageURLs[i]);
item.onabort = this.assetAborted.bind(this, this.mImageURLs[i]);

item.src = this.wrapURIAroundDataSource(this.mImageURLs[i].data);

// 延迟检查complete，给浏览器状态同步的时间
setTimeout(() => {
  if (item.complete && item.width > 0 && item.height > 0) {
    this.assetLoaded(this.mImageURLs[i]);
  }
}, 20);

2. 使用Image.decode()替代直接依赖onload与complete #

Chromium对Image.decode()有更可靠的异步加载处理，它会返回Promise，能更精准地捕获图片解码完成的状态，同时避免缓存状态判断的歧义：

this.mImageURLs[i].lastTry = now;
let item = new Image();
item.src = this.wrapURIAroundDataSource(this.mImageURLs[i].data);

item.decode()
  .then(() => this.assetLoaded(this.mImageURLs[i]))
  .catch((err) => {
    // 处理加载/解码失败
    this.assetFailed(this.mImageURLs[i], err);
  });

注意：decode()会自动处理缓存命中的情况，无需额外检查complete。

3. 强制绕过或控制缓存策略 #

如果是缓存机制导致的状态异常，可以通过以下方式干预：

• 在URL后添加时间戳或随机参数（仅针对非关键缓存资源）：${url}?t=${Date.now()}
• 或者通过fetch先获取资源Blob，再转为ObjectURL赋值给Image，手动控制缓存：

fetch(this.wrapURIAroundDataSource(this.mImageURLs[i].data), {
  cache: 'force-cache' // 或 'no-cache' 根据需求选择
})
.then(res => res.blob())
.then(blob => {
  let item = new Image();
  item.src = URL.createObjectURL(blob);
  item.onload = () => {
    URL.revokeObjectURL(item.src);
    this.assetLoaded(this.mImageURLs[i]);
  };
})
.catch(err => this.assetFailed(this.mImageURLs[i], err));

4. 监控Chromium的资源加载队列限制 #

Chromium对同域名的并发请求有数量限制（默认6个），一次性调度100个资源会进入队列等待。可以：

• 精细化控制并发数（比如把滑动窗口的并发数调整到低于浏览器限制）
• 用Performance API追踪资源加载状态，确认是否处于排队状态：

performance.getEntriesByType('resource').forEach(entry => {
  if (entry.name.includes('your-image-url')) {
    console.log(entry.initiatorType, entry.responseEnd - entry.requestStart);
  }
});

5. 排查Chromium的进程资源限制 #

如果浏览器渲染进程内存占用过高，可能会暂停或延迟资源加载。可以：

• 在DevTools的Performance面板录制加载流程，查看是否有主线程阻塞、GC频繁触发的情况
• 检查是否存在内存泄漏（比如未清理的Image对象），导致渲染进程资源不足

6. 绑定onerror/onabort事件捕获异常 #

当前代码未处理加载失败或中断的情况，Chromium在请求被中止时不会触发onload，也可能不会正确设置complete。添加这些事件可以捕获异常，触发重试逻辑：

item.onerror = () => {
  // 触发重试逻辑，注意避免无限重试
  if (this.mImageURLs[i].retryCount < 3) {
    this.mImageURLs[i].retryCount++;
    this.loadAsset(this.mImageURLs[i]);
  } else {
    this.assetFailed(this.mImageURLs[i]);
  }
};

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