浅谈localStorage的性能

念念不忘

发布于 2019-03-29 16:36:08

3.4K00

代码可运行

文章被收录于专栏：那些年我们学过的前端那些年我们学过的前端

运行总次数：0

代码可运行

浅谈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的运行解析（转）

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

关于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会失效，需要捕捉错误，并暴露出来