イメージURLを取得するときにFirebase getDownloadURL（）が実際に遅いです。

Question

コンポーネントに複数の（12以上の）オブジェクトを表示するページがあり、それぞれにイメージがあります。この画像は私が私のFirebaseストレージへの呼び出しを介して設定していsrc属性を持っている：

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 getDownloadURL()関数を呼び出す各子コンポーネントに小道具として渡されます。

これは機能しますが、getDownloadURLの機能は非常に遅いようです。ページがレンダリングされ、各画像に少なくとも1秒間表示/レンダリングが必要です。生のURLを取得してsrcに貼り付けることができるので、生のURLの問題ではないことが分かります。私はchrome devtoolsのNetworkタブを見て、getDownloadURL呼び出しと応答の間に少なくとも1秒間を示します。これはイメージをWebページに表示する正しい方法ですか？ Firebase Storageのドキュメントには、他の方法は言及されていません。

編集：2つのもの;まずストレージに5つのテストイメージしかないので、私はルートストレージのリファレンスで一括して同期しているようではありません。

第2のこと; chrome devtoolsは、それが「ストール」していることを1〜4秒で示しています。実際の要求には100msのトップがかかるだけです。何が失速の原因になりますか？

Answer 1

これは、このコードが実行されるたびに、1枚の画像をすべてダウンロードするために発生します。インスタンスをイメージ階層全体に同期させると、この問題が発生する可能性があります。

また、Chromeのネットワークタブを見て、その理由を把握し、あなたはこのように、ファイルのダウンロードのトンを持っているかどうかを確認できます。