浅谈localStorage的性能

如果说2012年的web开发世界有什么大事的话，人们印象最深的恐怕就是localStorage的性能了，这场争论开始于Christian Heilmann写的一篇文章： There is no simple solution for localStorage（中文版：本地存储并不简单）。在这篇文章里，他得出了几个关于localStorage性能差的几个论断。除此之外，他还建议对现有api进行改变以及对于可选api（IndexedDB、webSQL）的优化。

首先来几篇文章压压惊

中文存储不简单

作者：Christian Heilmann

localStorage, perhaps not so harmful

作者： John Allsopp
文章：分析了通过localStorage读写10KB的数据的时间

PSA: DOM localStorage considered harmful

localStorage的运行解析（转）

1. localStorage的关键问题在于它是通过同步操作的方式来进行文件I/o操作。
2. 写入localStorage的数据都会保存到磁盘上，除非主动删除数据，否则数据是永远不会过期的。
3. 用过nodeJs的人都知道，对于文件的I/O是非常昂贵和不一致的（不可信赖）。
4. 任何时间点任何的程序都可以访问文件。举例来说，你注意到过当一个杀毒软件运行的时候你的电脑是如何慢下来的吗？在理想状态下，你读取的文件不会有其他程序在同一时间访问该文件。在极端坏的情况下，如果你想读取一个文件，就必须等待文件上的锁被释放（其他程序操作文件时会锁定文件）。

关于localStorage的性能测试（结合日常需求）

结合日常工作中的使用，粗略的分析了一下 一个数据 分批次与整体存入和读取的时候 效率与性能差异

CateDta存储的是一个类目数组 文件大小在1M左右, 数组长度为40

量级为10的存储性能差异

   //  存储之前 首先清空上一次的数据
    window.localStorage.clear()
    const CateDta = getAllData().data
    let n = 10;


    let time1 = new Date().getTime()
    
    //  数组长度为50
    CateDta.forEach((item,index)=>{
        window.localStorage.setItem('index'+index,JSON.stringify(item))
    })

    let time2 = new Date().getTime()

    console.log(time2-time1);


    let time3 = new Date().getTime()
    window.localStorage.setItem('total',JSON.stringify(CateDta))
    let time4 = new Date().getTime()
    console.log(time4-time3);

在谷歌上面 测试了十组结果 得出结果：

• 分批次的存入时候 平均值是9.2ms
• 整体存入的话 7.2ms
• mac自带的浏览器中 safari浏览器 平均值更小 （单就localStorage而言 比谷歌的存储要快）

量级为10的时候 读取性能

 window.localStorage.clear()
    console.log(JSON.stringify(window.localStorage));
    const CateDta = getAllData().data
    window.localStorage.setItem('total',JSON.stringify(CateDta))
    let item = CateDta[0]

    for(var i=0;i<50;i++){
        window.localStorage.setItem('index'+i,JSON.stringify(item))
    }

    let time1 = new Date().getTime()

    for(var i=0;i<50;i++){
        window.localStorage.getItem('index'+i)
        if(i===49){
            console.log('majunchang');
        }
    }


    let time2 = new Date().getTime()

    console.log(time2-time1);


    let time3 = new Date().getTime()

    window.localStorage.getItem('total')
    let time4 = new Date().getTime()
    console.log(time4-time3);

在谷歌上面 测试了十组结果 计算平均值：

• 得出读取速度 分批次的时候 平均值是2.4ms
• 整体读取的话 1.3ms
• mac自带的浏览器中 safari浏览器 平均值更小 读取速度更快 （单就localStorage而言 比谷歌的读取要快）

量级为100的存储性能

window.localStorage.clear()
    const CateDta = getAllData().data
    let n = 10;




    let item = CateDta[2]

    let itemStr = JSON.stringify(item)
    let time1 = new Date().getTime()
    for(var i=0;i<500;i++){
        window.localStorage.setItem('index'+i,itemStr)
    }


    let time2 = new Date().getTime()

    console.log(time2-time1);

    var totalArr = []
    for(var i=0;i<500;i++){
        totalArr.push(item)
    }
    //  清除一下 防止内存溢出
    window.localStorage.clear()
    let str = JSON.stringify(totalArr)
    let time3 = new Date().getTime()
    window.localStorage.setItem('total',str)
    let time4 = new Date().getTime()
    console.log(time4-time3);

以500 为标准的时候 在谷歌上面 测试了十组结果 得出

• 分批次的时候 平均值是80.2ms 去除掉JSON.stringify的时间 37.8ms
• 整体存入的话 117.5ms 去除掉JSON.stringify的时间 56.4ms
• safari 在运行的时候 则会报错
• 经过查找相关文档发现
• https://baijiahao.baidu.com/s?id=1584741828030253885&wfr=spider&for=pc
  1. chrome 本地存储 5.12M
  2. Safari 本地存储 2.56M
  3. 并且无痕模式i localStorage 会抛出异常
  4. 解决办法 ： https://blog.csdn.net/qq_17757973/article/details/69685153?locationNum=10&fps=1

量级为100的读取性能

   window.localStorage.clear()
    const CateDta = getAllData().data

    let item = CateDta[2]

    for(var i=0;i<500;i++){
        window.localStorage.setItem('index'+i,JSON.stringify(item))
    }

    let time1 = new Date().getTime()

    for(var i=0;i<500;i++){
        window.localStorage.getItem('index'+i)
        if(i===499){
            console.log('majunchang');
        }
    }



    let time2 = new Date().getTime()

    console.log(time2-time1);

    window.localStorage.clear()

    var totalArr = []
    for(var i=0;i<500;i++){
        totalArr.push(item)
    }
    window.localStorage.setItem('total',JSON.stringify(totalArr))



    let time3 = new Date().getTime()

    window.localStorage.getItem('total')
    let time4 = new Date().getTime()
    console.log(time4-time3);

得出读取速度 分批次的时候 平均读取速度是7.9ms 整体存入的平均速度 16.6ms

整体存入一下 CateData5次 与 一次行存入 5倍CateData对比(超出5次 内存溢出)

  let time1 = new Date().getTime()
    for(var i=0;i<5;i++){
        window.localStorage.setItem('total'+i,JSON.stringify(CateDta))
    }
    let time2 = new Date().getTime()
    console.log(time2-time1);


    let time3 = new Date().getTime()
    let arr = []
    for(var i=0;i<5;i++){
        arr.push(CateDta)
    }
    window.localStorage.setItem('total',JSON.stringify(arr))
    let time4 = new Date().getTime()
    console.log(time4-time3);

在谷歌上面 测试了十组结果：
分别存入 存入5次 平均值是47.6ms 整体存入 存入5次的话 37.5ms

结论

• 日常我们工作中，使用localStorage进行本地存储的时候，分批次与整体存入 存在效率问题，但是两者的相差不大，建议整体存入，减少文件的i/o操作,转为js的对象操作
• localStorage存储、读取的速度，与每次存入的数据量大小，读写文件的次数有关系。
• 理论上来说，处理js对象的开销 小于读取文件的开销，但是当数据量庞大到一个量级的时候 ，整体存入的时间就会大于分批次存入的事件（待验证）
• safari的localStorage 相对于chrome来说 存储和读取更快，但是同时容量更小。
• 浏览器无痕模式下，localStorage会失效，需要捕捉错误，并暴露出来

参考文档

https://www.cnblogs.com/shinnyChen/p/3779782.html

https://www.jianshu.com/p/a47baf68addb

localStorage读取性能

HTML5新特性之localStorage的使用技巧，不看看你可能真的不知道