如何高效渲染网页中的大量图片？

Question

我正在尝试制作一个像airbnb主页一样的页面，它会呈现许多图像https://www.airbnb.com.sg/?has_logged_out=1但是当我滚动浏览时它严重滞后。我使用 aws s3 进行图像存储，并将公共 url 传递到前端并将其粘贴到 src 属性中进行渲染。 我使用 MERN 堆栈和 AWS s3 进行图像存储。

#返回图像文件的 AWS 公共链接的函数：

export const extractImageFromS3 = async (folder, imgUuid) => {
    // Define parameters for the image (bucket and object key)
    const bucket = 'sgspots'
    const key = `${folder}/${imgUuid}`


    try {
        const s3 = createS3Client();

        const headParams = {
            Bucket: bucket,
            Key: key,
        };
        // header data
        const headData = await s3.send(new HeadObjectCommand(headParams));

        // Log the full metadata to check its structure
        // console.log("Metadata from S3:", headData);

        // Get the public URL of the image
        const imageUrl = `https://${bucket}.s3.${process.env.AWS_REGION}.amazonaws.com/${key}`;


        // Return the public URL of the image
        return {
            url: imageUrl,
            cacheControl: headData.CacheControl, // Get Cache-Control header
        };
    } catch (err) {
        console.error(`Error fetching imageUuid: ${imgUuid}  from aws:, ${err}`);
    }
};

欲了解更多背景信息， 当我检查网络面板时，我发现当我滚动浏览时该网站收到了更多请求，这可能解释了延迟。但是，当我滚动回到之前滚动的区域（即向上滚动）时，网页也会滞后。所以这是我的粗略猜测，但我认为这种延迟可能是由于渲染问题造成的，因为网站可能会同时渲染太多东西？

尝试过的解决方案：

1. react virtualized：不确定是否是由于技能问题，但我认为react virtualized仅以1行渲染，但我需要以3行渲染。
2. 缓存图像：尝试过但无法使其工作。

尚未尝试的解决方案：

1. 压缩和优化图像尺寸
2. 分页（尽管理想情况下我不喜欢使用它，因为我希望所有内容都在页面中呈现）

如果您对解决此问题有任何想法，请告诉我，并向我发送参考链接以供阅读。谢谢！

Answer 1

预取/部分预渲染/主动缓存的组合是个好主意

最近有 2 个演示彻底解决了这个问题！

项目 1 代码 演示 项目 2 代码 演示

一个很好的概述更鸟瞰