Как эффективно визуализировать большое количество изображений на веб-странице? ⇐ Html

[Anonymous]

Я пытаюсь скопировать домашнюю страницу 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}`);
}
};

Проверив панель сети, я обнаружил, что при прокрутке веб-сайт получает больше запросов, что может объяснить задержку. Но когда я прокручиваю назад к ранее прокрученной области (т. е. прокручиваю обратно вверх), веб-страница также зависает. Итак, это мое грубое предположение, но я думаю, что эта задержка может быть связана с проблемой рендеринга, поскольку веб-сайт может отображать слишком много вещей одновременно?
Испробованные решения:

• Виртуализация React: не уверен, что это из-за проблем с навыками, но я думаю, что виртуализация React выполняет рендеринг только в строках по 1, но мне нужно визуализировать в строках по 1 3.
• Кэширование изображение: не удалось заставить его работать.

Решения, которые стоит попробовать:

• Сжатие и оптимизация размера изображения
• Разбивка на страницы (в идеале я хочу, чтобы на странице отображалось все)

Пожалуйста, разрешите Я знаю, есть ли у вас какие-либо идеи относительно решения этой проблемы, а также пришлите мне справочные ссылки для чтения. спасибо!

Подробнее здесь: https://stackoverflow.com/questions/793 ... -a-webpage