web-dev-qa-db-ja.com

localStorageの速度/コスト

JavaScriptを使用してlocalStorageの値を検索する速度はどれくらいですか？

JavaScriptオブジェクトにデータをキャッシュする価値があるかどうかを示すパフォーマンステストへのリンクはありますか？それともブラウザは、とにかくlocalStorageからアクセスされる値をすでにキャッシュしていますか？

私は特にFirefoxと、Chrome localStorageの実装に興味があります。

javascripthtmllocal-storage
55
Mike

価値のあるものとして、ここに jsperf test を示します。

localStorageのベンチマークの使用は、FF7とIE9の両方で通常のオブジェクトプロパティへのアクセスよりもかなり遅いです。もちろん、これは単なるマイクロベンチマークであり、は必ずしも実際の使用方法やパフォーマンスを反映しているわけではありません...

FF 7の実行から抜粋したサンプルは、「大幅に遅い」という意味をops/secondで示しています。

ネイティブローカルストレージノート
小さなセット374,397 13,657 10の個別のアイテム
大きなセット2,256 68 100の個別のアイテム
読み取りバイアス10,266 342 1書き込み、10読み取り、 10種類のアイテム

また、 localStorageに配置できるものに関する制限 もあります。 YMMV。

29
user166390

小さなベンチマークを作成しました。私がやろうとしていることは、localStorageからデータをかなり頻繁に取得することです。 localStorage.getItemは同期操作ですが、恐ろしく聞こえるかもしれませんが、そうですか？

  • 存在するアイテムを取得するためにlocalStorageを100万回呼び出す最初のテスト。
  • 2番目のテストでは、localStorageを100万回呼び出して、存在しないアイテムを取得します。

結果：

「検出されたアイテム：呼び出しあたり0.0007991071428571318ms」

「アイテムが見つかりません：呼び出しあたり0.0006365004639793477ms」

要するに、それを使うだけです。時間はかかりません。 1ミリ秒の0.0007

https://jsbin.com/resuziqefa/edit?js,console

 let results = [];
 let sum = 0;
 localStorage.setItem('foo', 'foo bar baz foo bar baz foo bar baz foo');

 for (let i = 0; i < 1000000; i++) {
   let a = performance.now();
   localStorage.getItem('foo');
   let result = performance.now() - a;
   sum += result;
   results.Push(result);
 }

 console.log(`Item found: ${sum / results.length}ms per call`);

 results = [];
 sum = 0;
 for (let i = 0; i < 1000000; i++) {
   let a = performance.now();
   localStorage.getItem('bar');
   let result = performance.now() - a;
   sum += result;
   results.Push(result);
 }

 console.log(`Item not found: ${sum / results.length}ms per call`);
20
Lukas

リンゴからリンゴ

localStorageとオブジェクトストレージを比較してもそれほど価値はありません。JavaScriptでの2つの目的は異なります。アプリでlocalStorageを数回タッチするだけで、残りの作業はメモリ内で行われる可能性があります。

ローカルストレージとCookie

localStorageに対するより良い比較は、その古典的な対応物、document.cookieの比較です。 localStorageとdocument.cookieの両方の主な目的は、ブラウザの更新後も値を維持することです。

codsandbox.io の例をまとめました

  • localStorageはdocument.cookieより2桁高速です。
  • ObjectストレージはlocalStorageよりも1桁高速です（無関係ですが、参照用に追加されています）。

localStorageは、ブラウザの更新後も値を維持するための最速のメカニズムです。

localstoragevcookies

Cookieを可能な限り高速にするためにcookieの正規表現ゲッターをプリコンパイルし、正確な測定のためにブラウザーのパフォーマンスAPIを使用していることに注意してください。すべてのテストは、一意のキーのセットを実行し、その後に同じキーを取得します。

3
cchamberlain