Data URL Schema
- 「data:」で始まるURL
- imgタグのsrcに埋め込める。
仕組み
- Blob URL Schemaと異なり直接バイナリデータをURLに埋め込める。
メリット
- Blob URL Schemaと異なり静的にも利用できる。
- 多くのブラウザで対応している。(Blob URL Schemaに比べてレガシーブラウザにも対応しています。)
デメリット
- キャッシュされないためリロードするたび画像データを読み直さないといけない。
- 100Mを超えるようなサイズだと、メモリが逼迫して非常に処理が重たい。(ブラウザが応答不能になる)
- HTMLにとても長い文字列を記述しないといけない。
ユースケース
- APIでのファイルの送信
- ファイルの読み込みを少なくする。
- CSSでの小画像読み込み
Blob URL Schema
- HTML5世代の機能(File APIのFileReaderを使う。)
- 「blob:」で始まるURLの一種、blob以降はランダムな文字列
- imgタグのsrcに埋め込める。
仕組み
- JavaScriptから動的にしか生成できない。
- 文字列にバイナリデータが保持されているのではなく、ローカルのストレージなどに保持されている。
- ローカルのストレージ(ブラウザのローカルストレージでのことではなく、ユーザーのPCのストレージ)に保持しており非同期に通信するのでユーザーのローカル環境が許す限りデータを保持でき、ブラウザメモリも逼迫しない。
- 「URL.createObjectURL()」を使用することで簡単にBlobから生成できる。
破棄するには?
- 現在のページがアンロードされるとBlob URL Schemaが自動消滅する。
- 手動でも削除は可能。
メリット
- Data URL Schemaと異なり文字列ではなくブラウザにバイナリを保持しているので、大容量のバイナリデータを扱うことが可能。(100MBを超えるファイルでも実用に耐える。)
- ランダムな文字列なのでユーザーの個人情報が開発者側に漏洩しない。(ユーザーのアップロードしたファイル名、ディレクトリ名など)
デメリット
- あくまでメモリではなくブラウザに保持するので、他の端末や他のブラウザで見るとアクセスできない。
- また、現在のページをリロードするとBlob URL Schemaも消滅します。
- Data URL Schemaに比べてレガシーブラウザには対応していません。(HTML5なので新しめの技術です。)
この記事へのコメントはありません。