javascript - 如何加速 JavaScript 图片加载

Question

我有一个网站需要在页面加载时加载 10 张图片。但是，在将图像插入 DOM 之前，我需要对其执行一些操作。 .

当我使用 fetch 加载图像时没有甚至执行任何操作，然后我将它们插入页面，页面加载时间比我测试使用相同图像但将它们放入 <img src=="url" 时要长好几倍标签。我知道这是因为 JavaScript 是单线程的，浏览器加载 HTML 的速度比 JS 快得多。但是我能做些什么来加快使用 fetch 检索图像的速度呢？ ？示例:

for (let i =0; i < 10; i++) {
    const imageBlob = await fetch('https://picsum.photos/300/200').then(response => response.blob());
    const url = URL.createObjectURL(imageBlob);
    div.style.backgroundImage = 'url(' + url + ')';

}

我知道使用 Service Worker 可能有助于缓存 fetch请求，但解决此问题的最佳方法是什么？

Answer 1

首先，确保您的服务器使用 HTTP/2 来提供更快的下载速度。然后，您可以异步处理每个图像响应以获得更好的性能。

const images = [...]

Promise.all(images.map(url => fetch(url).then(processImageResponse))
  .then(allImagesProcessed)

async function processImageResponse(response) {
  // consider ArrayBuffer here instead: response.arrayBuffer()
  const blob = await response.blob();
  ...
}

// receives results[] of what each processImageResponse() returns
function allImagesProcessed(results) {...}