読者です 読者をやめる 読者になる 読者になる

createObjectURLとは何か?

JavaScript

createObjectURL、省メモリだとかaudioの再生がスムーズだとか言われてるけど、これが何物なのか日本語の詳しい説明が見当たらないので、自分の理解を書いておく。File APIの仕様書を軽く流し読みして得た理解なので正確さは保証しない。ま、大筋は間違っちゃないと思う。

createObjectURLはFileオブジェクトのURL(Blob URL)を作成するもの。httpスキームのURLがサーバ上のリソースを指しているように、Blob URLは自分のPCのメモリ上にあるリソースを指し示す。

FileReaderのreadAsDataURLメソッドを使うとfileオブジェクトを元にURLを作成できるが、これはData URLで、URLエンコードされたファイルの中身そのもの。よって、ファイルを読み込んでData URLを作成すると、JavaScriptエンジンはファイルサイズに比例した大量のメモリを確保する。

一方、Blob URLはメモリに展開済みのデータへのリファレンスで、JavaScriptエンジン上にデータはロードされない(というか、できない)。このため、URLを渡せば後はブラウザが良きに計らってくれる場面では、Data URLよりも省メモリで高速な処理が期待できる。たとえばAudioとかVideoとかImageとかURLを指定すれば後はブラウザが処理してくれるようなオブジェクトにファイルを渡したい場合に有効というわけだ。

ただしBlob URLは参照なのでJavaScriptでデータ加工したりできない。そういうときはFileReaderで読み込む必要がある。また一時的なURLなのでブラウザをリロードすれば無効なURLとなってしまう。URLをsessionストレージに格納して後で使う的な使用法は不可能。