javascript - 画像の代わりに DataURI は API や Web サービスに実用的ですか?

Question

PHP ベースの API からデータを JSON として取得する JavaScript アプリケーションを作成しています。<img>現在、画像の URL は API から受信され、タグを使用して表示するために使用されます。

通常の画像 URL の代わりに dataURI を使用することは実用的で効率的ですか? 私のアプリケーションは主に携帯電話を対象としています。クライアント側で追加の処理能力が必要ですか?

Answer 1

データ URI を避ける 4 つの理由を次に示します。

1) データ URI にはオーバーヘッドがあります (処理と帯域幅の両方)。

2) データ URI はキャッシュされません

http://en.wikipedia.org/wiki/Data_URI_scheme#短所

3) データ URI はメモリをリークする可能性があります (Webkit ベースのブラウザでは、Chrome/Safari や「大きな」スマートフォンで!)

http://waldheinz.de/2010/06/webkit-leaks-data-uris/

Safari でのデータ URI リーク (旧: HTML5 キャンバスでのメモリ リーク)

4) 最大 6 倍遅くなる可能性があります。

http://www.mobify.com/blog/data-uris-are-slow-on-mobile/

反対に、データ URI の場所は間違いなくあります。画像がかなり静的な場合は、Data URI をクライアントに返す (そしてその文字列を localStorage にキャッシュする) のが洗練された解決策になる可能性があります。