Firebase getDownloadURL() 在获取图片 URL 时真的很慢

Posted 2023-03-22

【中文标题】Firebase getDownloadURL() 在获取图片 URL 时真的很慢

【英文标题】：Firebase getDownloadURL() is really slow at getting image URLs

【发布时间】：2017-04-25 14:33:12

【问题描述】：

我有一个页面，它在组件中显示多个 (12+) 对象，每个对象都有一个图像。这张图片有一个src 属性，我通过调用我的 Firebase 存储来设置它：

this.props.storage.child('Land.jpg').getDownloadURL().then(function(url) 
            var img = document.getElementById('imageGoesHere'+this.state.currentId);
            img.src = url;
        .bind(this))

storage 属性由父组件生成并向下传递：

firebase.initializeApp(config);
var storage = firebase.storage();
var storageRef = storage.ref("");

storageRef var 作为 prop 传递给调用 getDownloadURL() 函数的每个子组件。

这可行，但getDownloadURL 函数似乎真的很慢。页面呈现，然后每个图像至少需要一秒钟才能显示/呈现。我知道这不是原始 URL 的问题，因为我可以获取原始 URL 并将其粘贴到 src 中并且加载正常（即几乎立即）；我查看了 chrome devtools 中的 Network 选项卡，它在getDownloadURL 调用和响应之间至少显示了一秒钟。这是让图像显示在网页中的正确方法吗？ Firebase 存储文档没有提到任何其他方式。

编辑：两件事；首先，我在存储中只有 5 个测试图像，所以它不像我正在与根存储参考同步到一大堆。

第二件事； chrome devtools 告诉我它“停滞”了 1-4 秒，而实际请求只需要 100 毫秒。什么会导致停顿？

【问题讨论】：

性能总是取决于网络连接。您能否设置一个重现性能问题的 jsbin，以便我可以检查我获得的性能与您获得的性能？

一次只能获取 4-10 张图片。取决于浏览器。

【参考方案1】：

发生这种情况是因为每次运行此代码时，您都在下载您拥有的每一个图像。如果您将实例同步到整个图像层次结构，则可能会发生这种情况。

您还可以通过查看 Chrome 的“网络”选项卡找出原因，看看您是否有大量文件正在下载，如下所示：

【讨论】：

是的，有 12 张以上的图片，但我的每件商品都需要一张图片，而且由于我正在渲染搜索结果，所以有时我会得到一堆。仔细查看 chrome devtools 中的 Timings 选项卡，它看起来像是在 2 到 4 秒之间停止...

@IronWaffleMan 哪里可以解决这个问题？我也面临同样的问题。

【参考方案2】：

您应该在上传图片时使用 firebase 公共网址（如果您这样做的话）。像这样的：

uploadTask.then(function(snapshot)  return snapshot.ref.getDownloadURL() )

并立即将其保存到数据库中。只需创建一个“图像”表并创建一个名为“url”或“link”的列。每次需要该图像时都会使用该 URL/链接。

---

现在，如果您要手动上传，请选择图像（在 firebase 控制台中），然后在“文件位置”部分中，转到“访问令牌”。