使用jQuery递增图片源并循环显示的高效实现方案咨询

嘿，这个场景我太熟悉了！你现在遇到的性能瓶颈，主要是因为一次性发起了大量请求（包括那些不存在的图片），而且可能没做异步优化，导致浏览器得等所有请求（不管成功失败）处理完才开始渲染。下面给你几个实用的优化思路：

1. 异步加载+即时渲染，不要等全部请求完成 #

别一股脑把所有图片请求都发出去然后等结果，而是加载成功一个就渲染一个，这样用户能最快看到内容，不会有长时间的空白等待。

用Image对象结合异步逻辑来实现：

async function loadImages(start, end) {
  for (let i = start; i <= end; i++) {
    const imgUrl = `${i}.jpg`;
    try {
      const img = await loadSingleImage(imgUrl);
      document.body.appendChild(img); // 成功就立刻加到页面
    } catch (err) {
      console.log(`跳过缺失文件: ${imgUrl}`);
    }
  }
}

function loadSingleImage(url) {
  return new Promise((resolve, reject) => {
    const img = new Image();
    img.onload = () => resolve(img);
    img.onerror = () => reject(new Error(`图片不存在: ${url}`));
    img.src = url;
  });
}

// 调用加载1-100的图片
loadImages(1, 100);

2. 用HEAD请求提前判断文件存在性，减少无效带宽消耗 #

直接加载图片的话，哪怕文件不存在，浏览器也会下载错误响应的内容。换成HEAD请求先判断状态码，只有存在（200-299状态码）才去加载图片，能省不少带宽和请求时间：

async function checkImageExists(url) {
  try {
    const response = await fetch(url, { method: 'HEAD' });
    return response.ok;
  } catch {
    return false;
  }
}

async function loadImages(start, end) {
  for (let i = start; i <= end; i++) {
    const imgUrl = `${i}.jpg`;
    const exists = await checkImageExists(imgUrl);
    if (exists) {
      const img = new Image();
      img.src = imgUrl;
      document.body.appendChild(img);
    }
  }
}

3. 控制并发请求数，避免浏览器请求排队 #

浏览器对同一域名的并发请求数有上限（一般是6-8个），一次性发100个请求会导致大量请求排队等待。可以分批加载，比如每次同时处理6个请求（匹配浏览器默认上限），一批完成再加载下一批：

async function loadImagesInBatches(start, end, batchSize = 6) {
  for (let i = start; i <= end; i += batchSize) {
    const batchPromises = [];
    const batchEnd = Math.min(i + batchSize - 1, end);
    for (let j = i; j <= batchEnd; j++) {
      batchPromises.push(loadAndRenderImage(j));
    }
    await Promise.allSettled(batchPromises); // 等这批所有请求完成（不管成功失败）
  }
}

async function loadAndRenderImage(num) {
  const imgUrl = `${num}.jpg`;
  const exists = await checkImageExists(imgUrl);
  if (exists) {
    const img = new Image();
    img.src = imgUrl;
    document.body.appendChild(img);
  }
}

// 分批加载
loadImagesInBatches(1, 100, 6);

4. 避免阻塞主线程 #

如果你的代码里有大量同步DOM操作，会卡住浏览器渲染。可以把DOM更新放到requestAnimationFrame里，让浏览器在合适的时机渲染：

function addImageToDOM(img) {
  requestAnimationFrame(() => {
    document.body.appendChild(img);
  });
}

把上面这些方法结合起来，既能让浏览器尽快开始渲染已加载的图片，又能减少无效请求的开销，性能会提升很多！

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