[2026/8/27]

[WEB App]Storage Benchmark v1.0 - IndexedDB vs OPFS (SyncAccessHandle) 比較検証ツール

Storage Benchmark v1.0 (IndexedDB vs OPFS)

IndexedDBとOPFS（Origin Private File System）のストレージ書き込みパフォーマンスおよび、ミリ秒単位の処理レイテンシ（遅延）をリアルタイムで視覚的に比較検証できるブラウザ完結型ベンチマークツールです。

Web版PhotoshopやVS Code Web、SQLite Wasmなどの高度なWebアプリケーションで採用が進むOPFSと、従来の標準ストレージであるIndexedDB。それぞれの書き込み処理速度と、スレッドの引っかかり（レイテンシスパイキング）の発生頻度を視覚的に観察・比較できます。

起動：

ベンチマーク実行：

動画（GIF）:

IndexedDBとOPFS（SyncAccessHandle）の書き込み速度と処理遅延（スパイク）をリアルタイムに可視化・比較するブラウザベンチマークツール。

メインスレッドを停止させることなく精度高く計測するため、IndexedDB／OPFSの測定処理は独立したWeb Worker上で実行されます。バックグラウンドでの書き込み負荷をリアルタイムにUIへ描画します。

Web Worker内でのみ利用可能な高速同期API FileSystemSyncAccessHandle による直書き・ランダムアクセス（シーク書き込み）のパフォーマンスを計測できます。

単なる全体の実行時間だけでなく、書き込み1ブロックごとに要した時間をミクロに計測し、遅延時間に応じて緑（ 10ms）から赤（ 100ms）へカラーコード化してキャンバスに描画します。ガベージコレクションや内部キューの詰まりによる「カクつき・遅延スパイク」の有無が一目でわかります。

総ブロック数、1ブロックあたりの書き込み回数、1回のチャンクサイズ（4KB〜256KB）を自由に変更し、多様なアクセスパターンでの負荷テストが可能です。

パラメータを設定する
- 総ブロック数: 描画される全ブロックの数量（標準: 600）
- 書き込み回数/ブロック: 1ブロック内でループ実行する書き込み回数（標準: 20）
- チャンクサイズ: 1回の書き込みデータサイズ（4KB / 16KB / 64KB / 256KB）

リアルタイムマップと総処理時間を確認する
- 各ブロックが判定色で塗り潰されていきます。
- レーン右上に表示される「時間」でトータル処理速度を比較します。
- 赤やオレンジのブロックが多いレーンほど、不定期な処理の引っかかりが発生しています。

項目	IndexedDB	OPFS (SyncAccessHandle)
実行環境	Main / Worker	Web Worker 専用
I/O 方式	非同期トランザクション (`put`)	同期直書き (`write` + `at`)
アクセス特性	キー・バリュー保存（再構築オーバーヘッド有）	ダイレクトファイルシーク / ランダムアクセス
レイテンシ安定度	ガベージコレクション等によるスパイクが発生しやすい	フラットで極めて安定（ 10msの連続）
主な用途	構造化データ保存、小規模キャッシュ	DBエンジン(SQLite)、大容量バイナリ、3D/画像エディタ

Webアプリで大容量バイナリやSQLiteデータベースを扱う際、「なぜ大手のWebプロダクト（Web版PhotoshopやSQLite Wasm等）はIndexedDBではなくOPFSへ移行しているのか」を定量的かつ視覚的に検証するために開発しました。

単に「トータルで何秒かかったか」だけでなく、60fps/120fpsが求められるインタラクティブなWebアプリにおいて致命傷となる**「一瞬のフレーム落ち（レイテンシスパイキング）」**がどのストレージでどのように生じるのかを可視化することを目指しました。

検証結果として、トータル処理時間で2.5倍以上の差が出るだけでなく、IndexedDBでは散発的な遅延スパイクが発生するのに対し、OPFS（SyncAccessHandle）は常に一貫して均一な高速処理を維持できることが実証できます。