如何加快 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

您可以在server/website上本地下载图片，因此：

const imageBlob = await fetch('./images/200.jpg').then(response => response.blob());

这将提高速度，因为它不需要尝试从外部来源获取。

Answer 2

首先，确保您的服务器使用 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) {...}

如何加快 JavaScript 图片加载

How to speed up JavaScript image loading

javascript

xmlhttprequest

fetch

service-worker