Firebase Storage Flutter 显示图像加载时间过长

Posted 2023-02-23

【中文标题】Firebase Storage Flutter 显示图像加载时间过长

【英文标题】：Firebase Storage Flutter Displaying images takes too long to load

【发布时间】：2021-11-08 02:26:49

【问题描述】：

我正在创建一个教程应用程序，并且必须通过分步教程显示来自 Firebase 存储的图像。目前我正在使用 .getDownloadUrl 函数，并使用带有 URL 的缓存网络图像（外部库）显示图像。完成该步骤后，图像将被替换，加载图像至少需要 2-3 秒，并且可能会让用户非常恼火。此外，为了最大程度地减少延迟，我将附近的云存储位置转移到用户所在的位置，这略微提高了速度。除了将链接存储在 Cloud Firestore 上或一开始将所有 URL 保存在一个列表中之外，是否有更好的方法来显示图像。

【问题讨论】：

在优化之前，衡量时间的去向。

这很难回答。询问是否有显示图像的更好方法非常广泛。问题指出呈现图像需要 2-3 秒；是因为编码问题吗？图片是不是太大了？也许互联网连接有问题？常见的做法是在 Firestore 中存储链接，为什么不这样做呢？您是否尝试过减小图像尺寸？看？有很多我们不知道的相关数据。您可能需要考虑添加代码，然后使用其他详细信息澄清问题，因为这可能是您忽略的内容。

【参考方案1】：

最常见的方法是压缩/调整图像大小（或两者兼而有之）。通过这样做，您有几个选择：

1.您可以默认显示缩略图，并且仅在用户请求时加载完整图像（或在后台加载）（例如，他们单击有关教程的详细信息）

2. 根据屏幕尺寸加载不同版本的图像（您无需在移动设备上显示用于桌面的图像）

3. 用压缩后的图像替换旧图像。根据内容的不同，您可能不需要大于 200kb 的图像，这很慷慨。

您还可以考虑使用下一代格式存储图像，例如 WebP，因为它被认为是最有效的图像类型之一。但是，并非所有设备都支持它，因此您需要包含一个后备类型。

您说您正在缓存图像，这是减少加载时间的好步骤。您还说您将存储位置转移到更靠近用户的位置。您还可以尝试找到一个甚至更接近用户位置的 CDN（可能会递减收益）。

您似乎反对将 downloadUrls 存储在您的数据库中。这会有所帮助，因为您所要做的就是加载图像，而不是 ping 存储桶获取 url 然后加载它。

您的用例的另一个潜在解决方案可能是下载本教程以及下一个教程的图像，这样当用户单击下一步时，图像已经下载。

很遗憾，您无能为力。图像中包含大量数据，加载和渲染需要一些时间

【讨论】：

感谢您的帮助。我的大部分图像已经被压缩并且小于 100kb。我也可以尝试使用 WebP 图像。那会更快吗？我可以使用缓存方法，如果它在开始时加载所有 URL 可能会更好。我将无法下载图像，因为这可能会占用用户设备上的大量存储空间，并且在开始时可能需要一些时间来加载。请让我知道我是否还能做其他事情。非常感谢您的帮助。