Jak szybko patrzy na wartość w Localstorage z JavaScript?

Czy ktoś ma linki do żadnych testów wydajności wskazujących, czy warto buforować dane w obiekcie JavaScript? Lub czy przeglądarka już nie pamięta wartości, które są dostępne z Localstorage?

Jestem szczególnie zainteresowany Firefoksem i wdrożeniem Chrome Localstorage.

66
Mike 10 listopad 2011, 06:10

4 odpowiedzi

Najlepsza odpowiedź

Za to, co jest wart, tutaj jest test jsperf.

Benchmark użycie localStorage jest znacznie wolniejszy niż dostęp do właściwości regularnych obiektów zarówno w FF7, jak i IE9. Oczywiście jest to tylko mikro-benchmark, a niekoniecznie odzwierciedla użycie lub wydajność rzeczywistego ...

Próbka wyciągana z mojego biegu FF 7, aby pokazać, co oznacza "znacznie wolniej", w OPS / Drugi:

            native     local-storage    notes
small set   374,397    13,657           10 distinct items
large set   2,256      68               100 distinct items
read-bias   10,266     342              1 write, 10 reads, 10 distinct items

Również jest również Ograniczenia na temat tego, co można umieścić w LocalStorage. Ymmv.

38
Alexander Abakumov 10 grudzień 2018, 17:21

Właśnie wykonałem mały benchmark. To, co zamierzam zrobić, jest dość często dość danych z Localstorage i zastanawiałem się, że blokuje. Podczas gdy Localstorage.getitem jest zsynchronizowany, może brzmieć straszne, ale czy to?

  • Pierwszy test zadzwonił do 1 miliona razy Localstorage, aby uzyskać przedmiot, który istnieje.
  • II test, aby zadzwonić do 1 miliona razy Localstorage, aby uzyskać przedmiot, który nie istnieje.

Wyniki:

"Znaleziono przedmiot: 0,0007991071428571318ms na połączenie"

"Nie znaleziono przedmiotu: 0,00063650046397934774)

w skrócie - wystarczy go użyć. Nie ma czasu. 0,0007 z 1 Millisecond.

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`);
35
Lukas Liesis 10 listopad 2017, 18:50

Jabłka do jabłek

W porównaniu {x0}} do przechowywania obiektu, dwa mają różne cele w JavaScript. Jest prawdopodobne, że będziesz musiał tylko dotknąć localStorage Kilka razy w swojej aplikacji, a reszta pracy zostanie wykonana w pamięci.

Lokalna pamięć masowa vs cookies

Lepsze porównanie z localStorage byłoby to jego klasyczny odpowiednik, {x1}}. Głównym celem jest localStorage i document.cookie jest utrzymywanie wartości w całej przeglądarce odświeżania.

Zebrałem przykład na Codsandbox.io

  • localStorage jest dwie rzędami wielkości szybciej niż document.cookie.
  • Magazyn Object jest kolejnością wielkości szybciej niż localStorage (nieistotna, ale dodana do odniesienia).

{x0}} jest zdecydowanie najszybszym mechanizmem utrzymującej wartości na odświeżaniu przeglądarki.

localstoragevcookies

Należy pamiętać, że wyprofilowałem Getters REGEX Cookie, aby dokonać plików cookie tak szybko, jak to możliwe i wykorzystać API wydajności przeglądarki do dokładnych pomiarów. Wszystkie testy wykonują zestaw unikalnego klucza, a następnie uzyskać ten sam klucz.

10
cchamberlain 2 lipiec 2019, 08:51

Doceniam wysiłki poprzednich odpowiedzi, ale pozbawione benchmarki. Oto lepszy mikro-benchmark, nota, to wciąż mikro-benchmark. Zawsze wolisz pomiaru wąskich wąskich wydajności, aby wykonać przedwczesną optymalizację wydajności.

Benchmarki są przeznaczone do czytania i pisania pojedynczej wartości, listy stu obiektów i listy dziesięciu tysięcy obiektów z i do Localstorage.

TL; DR:

single read: 0.0004ms, write: 0.0114ms
small list read: 0.0325ms, write: 0.0498ms
large list read: 3.1787ms, write: 3.3190ms

Pobiegł na 3,1 GHz Quad-Core Intel Core I7. Chrome 79.

read local storage - single x 2,439,715 ops/sec ±0.91% (62 runs sampled)
read local storage - small x 30,742 ops/sec ±0.78% (62 runs sampled)
read local storage - large x 315 ops/sec ±1.30% (60 runs sampled)
write local storage - single x 88,032 ops/sec ±4.25% (33 runs sampled)
write local storage - small x 20,079 ops/sec ±1.89% (59 runs sampled)
write local storage - large x 301 ops/sec ±1.09% (60 runs sampled)

Test: read local storage - single
mean: 0.0004098839352502669ms
margin of error: ±0.000003731514453196282ms
devation: ±0.00001499080315635531ms

Test: read local storage - small
mean: 0.03252840093744983ms
margin of error: ±0.0002551322114660716ms
devation: ±0.001024955633672395ms

Test: read local storage - large
mean: 3.1786666666666674ms
margin of error: ±0.041479799689699ms
devation: ±0.16392915653288143ms

Test: write local storage - single
mean: 0.011359496605398242ms
margin of error: ±0.00048286808926899016ms
devation: ±0.0014152377493978731ms

Test: write local storage - small
mean: 0.04980309857651518ms
margin of error: ±0.0009408982120607311ms
devation: ±0.0036873348473201325ms

Test: write local storage - large
mean: 3.31899154589372ms
margin of error: ±0.03605551145015122ms
devation: ±0.14249224018921072ms

Oto fragment, aby uruchomić to sam, jeśli chcesz.

<script src="https://cdn.jsdelivr.net/npm/lodash@4.17.15/lodash.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/benchmark/2.1.4/benchmark.min.js"></script>
<script>
  const suite = new Benchmark.Suite();

  const genNum = () => Math.floor(Math.random() * 1000000);

  const genObj = () => ({
    target: String(genNum()),
    swap: String(genNum()),
    price: genNum()
  });

  const printStats = test =>
    console.log(
      `Test: ${test.name}
mean: ${test.stats.mean * 1000}ms
margin of error: ±${test.stats.moe * 1000}ms
devation: ±${test.stats.deviation * 1000}ms`
    );

  const singleNum = String(genNum());
  const smallList = _.range(100).map(genObj);
  const largeList = _.range(10000).map(genObj);

  const singleKey = "single-key";
  const smallKey = "small-key";
  const largeKey = "large-key";

  localStorage.setItem(singleKey, singleNum);
  localStorage.setItem(smallKey, JSON.stringify(smallList));
  localStorage.setItem(largeKey, JSON.stringify(largeList));

  suite
    .add("read local storage - single", function() {
      const readData = localStorage.getItem(singleKey);
    })
    .add("read local storage - small", function() {
      const readData = JSON.parse(localStorage.getItem(smallKey));
    })
    .add("read local storage - large", function() {
      const readData = JSON.parse(localStorage.getItem(largeKey));
    })
    .add("write local storage - single", function() {
      localStorage.setItem("single_write_key", singleNum);
    })
    .add("write local storage - small", function() {
      localStorage.setItem("small_write_key", JSON.stringify(smallList));
    })
    .add("write local storage - large", function() {
      localStorage.setItem("large_write_key", JSON.stringify(largeList));
    })
    .on("cycle", function(event) {
      console.log(String(event.target));
    })
    .on("complete", function() {
      this.forEach(printStats);
    })
    .run({ async: true });
</script>
8
alextes 24 listopad 2019, 10:48