Vue WebApp网络驱动器图片加载优化：预缓存至RAM需求

你遇到的核心问题是：getFile()返回的File对象只是文件的引用和元数据，并没有把实际文件内容读取到内存中。await Promise.all(filePromises)只是拿到了所有文件的引用，真正的文件内容要等到<img>请求Blob URL时才会从网络驱动器拉取，这就是加载缓慢的原因。

方案1：主动将文件内容读取到内存 #

要确保文件内容加载到内存，需要主动将File对象读取为二进制数据（比如ArrayBuffer），再基于内存中的数据创建Blob或直接生成DataURL。后续<img>使用的就是内存中的数据，不会再去网络驱动器拉取。

实现代码 #

修改原有的处理逻辑，在拿到files后主动读取内容：

// 批量读取文件到内存，控制并发避免浏览器卡顿
const loadFilesToMemory = async (files) => {
  const concurrency = 50; // 每次并行处理50个，可根据设备性能调整
  const results = [];
  for (let i = 0; i < files.length; i += concurrency) {
    const batch = files.slice(i, i + concurrency);
    const batchResults = await Promise.all(
      batch.map(async (file) => {
        // 读取为ArrayBuffer，再转成内存中的Blob
        const arrayBuffer = await file.arrayBuffer();
        const inMemoryBlob = new Blob([arrayBuffer], { type: file.type });
        return {
          url: URL.createObjectURL(inMemoryBlob),
          name: file.name
        };
        // 也可以直接生成DataURL，无需revoke但字符串占用内存略大
        // const reader = new FileReader();
        // await new Promise(resolve => reader.onload = resolve);
        // reader.readAsDataURL(file);
        // return { url: reader.result, name: file.name };
      })
    );
    results.push(...batchResults);
  }
  return results;
};

// 完整流程
const dirHandle = await window.showDirectoryPicker();
const filePromises = getFilePromises(dirHandle);
const files = await Promise.all(filePromises);

// 显示加载动画
showLoadingAnimation();

// 主动加载所有文件到内存
const imageURLs = await loadFilesToMemory(files);

// 加载完成，隐藏动画并渲染虚拟列表
hideLoadingAnimation();
// 后续用imageURLs渲染 <img :src="item.url">

方案2：通过Image对象预加载到浏览器缓存 #

如果不想直接把二进制数据存在内存变量里，也可以通过创建Image对象预加载，让浏览器把图片缓存到内存中。这种方式依赖浏览器缓存策略，不如主动读取可靠，但代码更简洁：

const preloadImages = async (blobURLs) => {
  const concurrency = 50;
  for (let i = 0; i < blobURLs.length; i += concurrency) {
    const batch = blobURLs.slice(i, i + concurrency);
    await Promise.all(
      batch.map(url => new Promise((resolve, reject) => {
        const img = new Image();
        img.onload = resolve;
        img.onerror = reject;
        img.src = url;
      }))
    );
  }
};

// 完整流程
const dirHandle = await window.showDirectoryPicker();
const filePromises = getFilePromises(dirHandle);
const files = await Promise.all(filePromises);
const imageURLs = files.map(file => URL.createObjectURL(file));

showLoadingAnimation();
await preloadImages(imageURLs);
hideLoadingAnimation();

关键注意事项 #

• 内存管理：使用URL.createObjectURL时，记得在组件销毁或不再需要图片时调用URL.revokeObjectURL(url)释放内存；使用DataURL无需revoke，但要确保不再使用相关变量时，让垃圾回收机制清理。
• 并发控制：1万张图片一次性并行处理会阻塞浏览器线程，必须控制并发数（建议50-100），避免页面假死。
• 错误处理：网络驱动器可能存在读取失败的文件，要在读取过程中加入错误捕获，避免整个加载流程崩溃。

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