javascript - Firebase getDownloadURL() 获取图像 URL 的速度非常慢

Question

我有一个页面，在组件中显示多个(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 中的“网络”选项卡，它显示 getDownloadURL 调用和响应之间至少有一秒钟的时间。这是在网页中显示图像的正确方法吗？ Firebase Storage 文档没有提到任何其他方式。

编辑:有两件事；首先，我的存储中只有 5 个测试图像，所以我并没有使用根存储引用同步到一大堆图像。

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

Answer 1

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

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