Загрузка флаттера хранилища Firebase Для отображения изображений занимает слишком много времени

# #firebase #flutter #firebase-storage

Вопрос:

Я создаю своего рода учебное приложение и должен отображать изображения из хранилища firebase с пошаговым руководством. В настоящее время я использую функцию .getDownloadUrl и отображаю изображения с помощью кэшированных сетевых изображений(Внешняя библиотека) с URL-адресом. Изображения заменяются по завершении шага, загрузка изображения занимает не менее 2-3 секунд и может вызвать у пользователя сильное раздражение. Кроме того, чтобы минимизировать задержку, я переместил расположение облачного хранилища поблизости туда, где мог бы находиться пользователь, это немного повысило скорость. Есть ли лучший способ отображения изображений, помимо хранения ссылок в Cloud Firestore или сохранения всех URL-адресов в одном списке в начале?

Комментарии:

1. Перед оптимизацией измерьте, куда уходит время.

2. На этот вопрос будет трудно ответить. Вопрос о том, есть ли лучший способ отображения изображений , довольно широк. В вопросе говорится, что для представления изображения требуется 2-3 секунды; это связано с проблемой кодирования? Не слишком ли велики изображения? Может быть, проблема с подключением к Интернету? Обычная практика-хранить ссылки в Firestore, почему бы этого не сделать? Вы пробовали уменьшить размер изображения? Видишь? Есть много данных, которые могут быть связаны, о которых мы не знаем. Возможно, вы захотите добавить свой код, а затем уточнить вопрос с дополнительными деталями, поскольку это может быть что-то, что вы упускаете из виду.

Ответ №1:

Наиболее распространенным подходом является сжатие/изменение размера (или и то, и другое) ваших изображений. Делая это, у вас есть несколько вариантов:

1. Вы можете отображать миниатюру по умолчанию и загружать полное изображение (или загружать его в фоновом режиме) только по запросу пользователя (например. они нажимают на подробную информацию об учебнике)

2. Загрузите другую версию изображения в зависимости от размера экрана (вам не нужно отображать изображение, предназначенное для рабочего стола, на мобильном устройстве).

3. Замените старое изображение на сжатое. В зависимости от того, что это за контент, вам, вероятно, не нужны изображения размером более 200 КБ, и это щедро.

Вы также можете рассмотреть возможность хранения изображений в формате следующего поколения, таком как WebP, поскольку он считается одним из наиболее эффективных типов изображений. Но он еще не поддерживается на всех устройствах, поэтому вы захотите включить резервный тип.

Вы сказали, что кэшируете изображения, что является хорошим шагом для сокращения времени загрузки. Вы также сказали, что переместили место хранения, чтобы быть ближе к пользователям. Вы также можете попытаться найти CDN, который находится еще ближе к местоположению вашего пользователя (возможно, с уменьшением отдачи).

Вы, кажется, против сохранения загрузок в вашей базе данных. Это помогло бы, так как все, что вам нужно будет сделать, это загрузить изображение, вместо того, чтобы искать URL-адрес в корзине, а затем загружать его.

Другим потенциальным решением для вашего варианта использования может быть загрузка изображений для этого урока, а также для следующего, чтобы, когда пользователь нажимает «Далее», изображения уже загружены.

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

Комментарии:

1. Спасибо вам за вашу помощь. Большинство моих изображений уже сжаты и имеют размер менее 100 кб. Я также могу попробовать использовать изображения WebP. Это было бы быстрее? Я мог бы использовать метод кэширования, возможно, было бы лучше, если бы он загружал все URL-адреса в начале. Я не смогу загрузить изображения, так как это, вероятно, займет много места на устройстве пользователя и, вероятно, потребует времени для загрузки в начале. Пожалуйста, дайте мне знать, если я смогу сделать что-нибудь еще. Я действительно ценю вашу помощь.