苹果到苹果

Question

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

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

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

Answer 1

对于它的价值，这里是jsperf test。

{FF}和IE9中localStorage的基准使用显着慢，而不是访问常规对象属性。当然，这只是一个微型基准测试，并不一定反映实际使用情况或性能 ......

从我的FF 7运行中拉出的示例显示＆＃34;明显更慢＆＃34;意思是，在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

此外，还有restrictions on what can be put in localStorage。 YMMV。

Answer 2

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

第一次测试调用100万次localStorage来获取确实存在的项目。
第二次测试，调用100万次localStorage来获取不存在的项目。

结果：

＆＃34;找到的项目：每次通话0.0007991071428571318ms＆＃34;

＆＃34;找不到物品：每次通话0.0006365004639793477ms＆＃34;

简而言之 - 只需使用它。这需要时间。 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几次，其余的工作就会在内存中完成。

本地存储vs Cookies

与localStorage更好的比较是它的经典对应物document.cookie。 localStorage和document.cookie的主要目的都是在浏览器刷新期间保持值。

我在codsandbox.io

上举了一个例子

localStorage比document.cookie快两个数量级。
Object的存储量比localStorage快一个数量级（无关，但仅供参考）。

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

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

Answer 4

我感谢先前回答的努力，但发现缺乏基准。请注意，这是一个更好的微基准，它仍然是一个微基准。与执行过早的性能优化相比，总是更喜欢测量实际的性能瓶颈。

基准用于从和向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

在3,1 GHz四核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

如果您愿意，可以在此处摘录自己运行的代码。

<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>

localStorage的速度/成本

4 个答案:

苹果到苹果

本地存储vs Cookies