MERN+AWS S3架构下网页大量图片高效渲染方案求助（解决Airbnb式首页滚动卡顿问题）

我正在尝试复刻Airbnb的首页，页面需要展示大量图片，但滚动的时候卡顿得特别厉害。目前我用AWS S3存储图片，把生成的公共URL传给前端后，直接放到img标签的src属性里渲染。我使用的技术栈是MERN+AWS S3做图片存储。

生成AWS图片公共链接的函数 #

下面是我用来从S3提取图片公共链接的函数：

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}`);
    }
};

我检查了浏览器的网络面板，发现滚动时网站会发起更多请求，这应该是卡顿的原因之一。但奇怪的是，当我滚回之前已经浏览过的区域（比如往上滚动）时，页面还是会卡。所以我初步猜测，卡顿可能还和渲染有关——页面一次性需要渲染的元素太多了？

已尝试的解决方案 #

• React Virtualized：不确定是不是我操作的问题，但感觉这个组件只能按单行来渲染，而我需要的是每行3列的布局，没找到合适的配置方式
• 图片缓存：尝试过配置缓存，但没能成功实现预期效果

计划尝试的方案 #

• 压缩优化图片尺寸
• 分页展示（不过理想情况下我更希望页面是单页滚动展示所有内容）

麻烦各位大佬给我一些解决思路，如果有相关的参考内容也请一起分享，谢谢大家！

备注：内容来源于stack exchange，提问作者wei bin lau