web-dev-qa-db-fra.com

Vitesse / coût du stockage local

À quelle vitesse recherche une valeur dans localStorage avec Javascript?

Quelqu'un a-t-il des liens vers des tests de performances qui indiquent s'il vaut la peine de mettre en cache les données dans un objet JavaScript? Ou le navigateur met-il déjà en cache les valeurs auxquelles on accède depuis localStorage?

Je suis particulièrement intéressé par Firefox et les implémentations Chrome de localStorage.

javascripthtmllocal-storage
55
Mike

Pour ce que ça vaut, voici un test jsperf .

L'utilisation de référence de localStorage est beaucoup plus lente que l'accès à des propriétés d'un objet régulier dans FF7 et IE9. Bien sûr, ce n'est qu'un micro-benchmark, et ne reflète pas nécessairement l'utilisation ou les performances du monde réel ...

Échantillon extrait de ma course FF 7 pour montrer ce que signifie "considérablement plus lent", en ops/seconde:

 notes de stockage local natif 
 petit ensemble 374 397 13 657 10 éléments distincts 
 grand ensemble 2 256 68 100 éléments distincts 
 biais de lecture 10 266 342 1 écriture, 10 lectures, 10 éléments distincts

En outre, il y a restrictions sur ce qui peut être mis dans localStorage . YMMV.

29
user166390

Je viens de faire une petite référence. Ce que je prévois de faire, c'est d'obtenir assez souvent des données de localStorage et je me demandais si cela allait bloquer. Bien que localStorage.getItem soit une opération synchronisée, cela peut sembler effrayant, mais l'est-ce?

  • 1er test à appeler 1 million de fois localStorage pour obtenir l'élément qui existe.
  • 2ème test pour appeler 1 million de fois localStorage pour obtenir un élément qui n'existe PAS.

Résultats:

"Article trouvé: 0.0007991071428571318ms par appel"

"Article non trouvé: 0,0006365004639793477ms par appel"

En bref - utilisez-le. Ça ne prend pas de temps. 0,0007 de 1 milliseconde.

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

Pommes aux pommes

Il n'y a pas beaucoup de valeur à comparer localStorage au stockage d'objets, les deux ont des objectifs différents en JavaScript. Il est probable que vous n'aurez qu'à toucher localStorage plusieurs fois dans votre application et le reste du travail se fera en mémoire.

Stockage local vs cookies

Une meilleure comparaison avec localStorage serait celle de son homologue classique, document.cookie. localStorage et document.cookie a pour principal objectif de conserver une valeur lors des actualisations du navigateur.

J'ai mis en place un exemple sur codsandbox.io

  • localStorage est deux fois plus rapide que document.cookie.
  • Object le stockage est un ordre de grandeur plus rapide que localStorage (non pertinent mais ajouté pour référence).

localStorage est de loin le mécanisme le plus rapide pour conserver les valeurs lors d'une actualisation du navigateur.

localstoragevcookies

Notez que j'ai précompilé des récupérateurs d'expressions rationnelles de cookies afin de créer des cookies le plus rapidement possible et utilisé l'API de performance du navigateur pour des mesures précises. Tous les tests font un ensemble d'une clé unique suivi par un get de la même clé.

3
cchamberlain