localStorage的速度/成本

Question

使用Javascript在localStorage中查找值的速度有多快？

有没有人有任何性能测试的链接,表明是否值得缓存JavaScript对象中的数据？或者浏览器是否已经缓存了从localStorage访问的值？

我对localStorage的Firefox和Chrome实现特别感兴趣.

Answer 1

对于它的价值,这是一个jsperf测试.

的基准使用localStorage是显著慢比的访问规则对象属性在两个FF7和IE9.当然,这只是一个微观基准,并不一定反映现实世界的使用或性能 ......

从我的FF 7运行中拉出样本,以显示"明显更慢"的含义,在ops/second中:

            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

此外,localStorage可以放置什么限制.因人而异.

Answer 2

刚做了一个小基准.我打算做的是经常从localStorage获取一些数据,我想知道它会阻止它.虽然localStorage.getItem是同步操作,但它可能听起来很可怕但是它呢？

• 第一次测试调用100万次loc​​alStorage来获取确实存在的项目.
• 第二次测试调用100万次loc​​alStorage来获取不存在的项目.

结果:

"找到的项目:每次通话0.0007991071428571318ms"

"找不到物品:每次通话0.0006365004639793477ms"

简而言之 - 只需使用它.这需要时间.0.0007的1毫秒.

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`);

Answer 3

苹果对苹果

localStorage与对象存储相比没有太大的价值，两者在 JavaScript 中有不同的用途。很可能你只需要localStorage在你的应用程序中触摸几次，其余的工作将在内存中完成。

本地存储与 Cookie

一个更好的比较localStorage是它的经典对应物，document.cookie. 这两个localStorage和document.cookie的主要目的是坚持跨浏览器刷新的值。

我在codsandbox.io上放了一个例子

• localStorage比 快两个数量级document.cookie。
• Objectstorage 比localStorage（无关但添加以供参考）快一个数量级。

localStorage 是迄今为止在浏览器刷新中保持值的最快机制。

请注意，我已经预编译了 cookie regex getter，以便尽可能快地制作 cookie，并使用浏览器性能 API 进行准确测量。所有测试都执行一组唯一键，然后获取相同的键。

Answer 4

I appreciate the efforts of the previous answers but found the benchmarks lacking. Here's a better micro-benchmark, do note, it's still a micro-benchmark. Always prefer measuring real performance bottlenecks to doing premature performance optimization.

Benchmarks are for reading and writing a single value, a list of a hundred objects, and a list of ten-thousand objects from and to 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

Ran on a 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

Here's a snippet to run it yourself if you wish.

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