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

问题描述 投票:0回答:1

我正在尝试复制 airbnb 的主页,该主页显示大量图像,但当我滚动时,它严重滞后。我使用 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. 分页(理想情况下我希望所有内容都呈现在页面中)

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

javascript html image amazon-s3 rendering
1个回答
0
投票

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

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

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

一个很好的概述更鸟瞰

© www.soinside.com 2019 - 2024. All rights reserved.