我有一个网站需要在页面加载时加载 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
请求,但解决此问题的最佳方法是什么?
最佳答案
首先,确保您的服务器使用 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 - 如何加速 JavaScript 图片加载,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/62586807/