• 在庆祝海南建省办经济特区30周年大会上的讲话 2019-10-07
  • 俄罗斯世界杯F组:球迷风采 2019-09-24
  • 彭于晏廖凡曝姜文“精神洁癖” 2019-09-24
  • 苏州大学研究生支教团网上众筹资助留守儿童 2019-09-23
  • 湖北政务微信排行榜第187期出炉 交警类公号表现亮眼 2019-09-19
  • 【奋斗吧2018】风电检修工——荒原上的“听风者” 2019-08-31
  • 母亲节又送康乃馨?送这样的健康佳品才走心 2019-08-30
  • [酷]此文已经把马克思理论、边际理论、人类需求层次理论、生物学理论、心理学理论、社会管理学理论等理论在哲学层面完美融合了! 2019-08-26
  • 兰芝雪纱修颜气垫隔离霜 2019-07-27
  • “鹊桥”中继星顺利进入使命轨道运行 2019-07-27
  • 超越舆情管理的360度信息决策 2019-07-22
  • 视频陶然居变形记:从路边小饭馆到全国餐饮十强 2019-07-21
  • 防震减灾事业发展的重要理论成果 2019-07-20
  • 珠宝配美人!李冰冰大片衣着性感秀身段 2019-07-20
  • 机器人也能拥有“情商”?这个可以有 2019-07-19
  • 香港赛马会博彩公司:详解关于JSON.parse()和JSON.stringify()的性能小测试

     更新时间:2019年03月14日 09:18:51   作者:ican   我要评论
    这篇文章主要介绍了详解关于JSON.parse()和JSON.stringify()的性能小测试,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧

    香港赛马会网站惠泽社绝杀八码 www.mwcrz.tw JSON.parse(JSON.stringify(obj))我们一般用来深拷贝,其过程说白了,就是利用 JSON.stringify 将js对象序列化(JSON字符串),再使用JSON.parse来反序列化(还原)js对象。至于这行代码为什么能实现深拷贝,以及它有什么局限性等等,不是本文要介绍的。本文要探究的是,这行代码的执行效率如何?如果随意使用会不会造成一些问题?

    先上两个js性能测试的依赖函数

    /**
     * 一个简单的断言函数
     * @param value {Boolean} 断言条件
     * @param desc {String} 一个消息
     */
    function assert(value, desc) {
      let li = document.createElement('li');
      li.className = value ? 'pass' : 'fail';
      li.appendChild(document.createTextNode(desc));
      document.getElementById('results').appendChild(li);
    }
    /**
     * 一个测试套件,定时器是为了多次执行减少误差
     * @param fn {Function} 需要多次执行的代码块(需要测试、比对性能的代码块)
     * @param config {Object} 配置项,maxCount: 执行代码块的for循环次数,times: 定时器执行次数
     */
    function intervalTest(fn, config = {}) {
      let maxCount = config.maxCount || 1000;
      let times = config.times || 10;
      let timeArr = [];
      let timer = setInterval(function () {
        let start = new Date().getTime();
        for (let i = 0; i < maxCount; i++) {
          fn.call(this);
        }
        let elapsed = new Date().getTime() - start;
        assert(true, 'Measured time: ' + elapsed + ' ms');
        timeArr.push(elapsed);
        if (timeArr.length === times) {
          clearInterval(timer);
          let average = timeArr.reduce((p, c) => p + c) / times;
          let p = document.createElement('p');
          p.innerHTML = `for循环:${maxCount}次,定时器执行:${times}次,平均值:${average} ms`;
          document.body.appendChild(p);
        }
      }, 1000);
    }

    定义一些初始数据

    let jsonData = {
      title: 'hhhhh',
      dateArr: [],
      series: [
        {
          name: 'line1',
          data: []
        },
        {
          name: 'line2',
          data: []
        },
        {
          name: 'line3',
          data: []
        },
      ]
    };
    
    let res = [
      {
        name: 'line1',
        value: 1
      },
      {
        name: 'line2',
        value: 2
      },
      {
        name: 'line3',
        value: 3
      },
    ];

    场景1:模拟真实环境中图表数据实时更新

    数据处理函数

    /**
     * 处理json数据的函数。模拟真实环境中图表数据实时更新
     * @param lastData {Object} 上一次的数据
     * @param res {Array} 当前数据
     * @returns data 处理完成后的结果集
     */
    function handleJsonData(lastData, res) {
      // 1. 使用 JSON.parse(JSON.stringify()) 深拷贝
      let data = JSON.parse(JSON.stringify(lastData));
    
      // 2. 不使用JSON序列化,直接修改参数
      // let data = lastData;
    
      if (data.dateArr.length > 60) {
        data.dateArr.shift();
        for (let i = 0; i < data.series.length; i++) {
          data.series[i].data.shift();
        }
      }
      data.dateArr.push(new Date().toTimeString().substr(0, 8));
      for (let i = 0; i < data.series.length; i++) {
        data.series[i].data.push(res[i].value);
      }
      return data;
    }

    maxCount=100

    跑起来,先让maxCount=100,for循环100次

    let jsonTest = function () {
      jsonData = handleJsonData(jsonData, res);
    };
    
    intervalTest(jsonTest, {maxCount: 100});

    1.使用 JSON.parse(JSON.stringify()) 深拷贝 的结果:

    2.不使用JSON序列化,直接修改参数 的结果:

    function handleJsonData(lastData, res) {
      // 1. 使用 JSON.parse(JSON.stringify()) 深拷贝
      // let data = JSON.parse(JSON.stringify(lastData));
    
      // 2. 不使用JSON序列化,直接修改参数
      let data = lastData;
      
      // ...
    }

    maxCount=1000

    intervalTest(jsonTest, {maxCount: 1000});

    1.使用 JSON.parse(JSON.stringify()) 深拷贝 的结果:

    2.不使用JSON序列化,直接修改参数 的结果:

    maxCount=10000

    intervalTest(jsonTest, {maxCount: 10000});

    1.使用 JSON.parse(JSON.stringify()) 深拷贝 的结果:

    2.不使用JSON序列化,直接修改参数 的结果:

    场景2:判断一个对象是否为空对象

    // 1. 使用 JSON.stringify() 判断一个对象是否为空对象
    let isEmptyObject1 = function () {
      if (JSON.stringify(jsonData) === '{}') {
        // do something
      }
    };
    
    // 2. 使用 Object.keys().length 判断一个对象是否为空对象
    let isEmptyObject2 = function () {
      if (Object.keys(jsonData).length === 0) {
        // do something
      }
    };

    只是走了一下判断条件,if内部没有执行代码

    maxCount=1000

    1.使用 JSON.stringify() 判断一个对象是否为空对象 的结果:

    intervalTest(isEmptyObject1, {maxCount: 1000});

    2.使用 Object.keys().length 判断一个对象是否为空对象 的结果:

    intervalTest(isEmptyObject2, {maxCount: 1000});

    maxCount=10000

    1.使用 JSON.stringify() 判断一个对象是否为空对象 的结果:

    2.使用 Object.keys().length 判断一个对象是否为空对象 的结果:

    maxCount=100000

    1.使用 JSON.stringify() 判断一个对象是否为空对象 的结果:

    2.使用 Object.keys().length 判断一个对象是否为空对象 的结果:

    关于JSON.parse()和JSON.stringify()的测试先到此为止,变换参数、更改执行的代码块可能会有不同结果,以上结果仅供参考。

    小结论:能不用JSON.parse()和JSON.stringify()就不用,采用替代方案且性能更优的。PS:特别是需要多次执行的代码块,特别是这个JSON数据比较庞大时

    以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。

    相关文章

    • 一道常被人轻视的web前端常见面试题(JS)

      一道常被人轻视的web前端常见面试题(JS)

      面试题是招聘公司和开发者都非常关心的话题,公司希望通过它了解开发者的真实水平和细节处理能力,而开发者希望能够最大程度地展示自己的水平(甚至超常发挥)。本文提供了众多前端开发面试题,无论是招聘方还是应聘方都值得一看
      2016-02-02
    • 用原生js统计文本行数的简单示例

      用原生js统计文本行数的简单示例

      这篇文章我们来看看如何利用原生的JavaScript实现统计文本的行数,代码实现起来很简单,有需要的可以参考借鉴。
      2016-08-08
    • Web打印解决方案之证件套打的实现思路

      Web打印解决方案之证件套打的实现思路

      这篇文章主要介绍了Web打印解决方案之证件套打的实现思路的相关资料,非常不错,具有参考借鉴价值,需要的朋友可以参考下
      2016-08-08
    • SOSO地图API使用(一)在地图上画圆实现思路与代码

      SOSO地图API使用(一)在地图上画圆实现思路与代码

      最近在做SOSO地图相关开发,遇到相关画圆知识,特此简单记录下来,接下来讲解如何在在地图上画圆,感兴趣的朋友可以了解下
      2013-01-01
    • 微信小程序中时间戳和日期的相互转换问题

      微信小程序中时间戳和日期的相互转换问题

      这篇文章主要介绍了微信小程序中时间戳和日期的相互转换问题,本文给大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友可以参考下
      2018-07-07
    • JS实现简单路由器功能的方法

      JS实现简单路由器功能的方法

      这篇文章主要介绍了JS实现简单路由器功能的方法,基于javascript模拟简单路由编码的相关技巧,需要的朋友可以参考下
      2015-05-05
    • 详解微信小程序调起键盘性能优化

      详解微信小程序调起键盘性能优化

      这篇文章主要介绍了详解微信小程序调起键盘性能优化,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
      2018-07-07
    • JS实现侧悬浮浮动实例代码

      JS实现侧悬浮浮动实例代码

      这篇文章主要介绍了JS实现侧悬浮浮动实例代码,有需要的朋友可以参考一下
      2013-11-11
    • 基于JavaScript实现购物车功能

      基于JavaScript实现购物车功能

      这篇文章主要为大家详细介绍了基于JavaScript实现购物车功能,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
      2017-02-02
    • 基于AGS JS开发自定义贴图图层

      基于AGS JS开发自定义贴图图层

      这篇文章主要为大家详细介绍了基于AGS JS开发自定义贴图图层的相关资料,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
      2017-03-03

    最新评论

  • 在庆祝海南建省办经济特区30周年大会上的讲话 2019-10-07
  • 俄罗斯世界杯F组:球迷风采 2019-09-24
  • 彭于晏廖凡曝姜文“精神洁癖” 2019-09-24
  • 苏州大学研究生支教团网上众筹资助留守儿童 2019-09-23
  • 湖北政务微信排行榜第187期出炉 交警类公号表现亮眼 2019-09-19
  • 【奋斗吧2018】风电检修工——荒原上的“听风者” 2019-08-31
  • 母亲节又送康乃馨?送这样的健康佳品才走心 2019-08-30
  • [酷]此文已经把马克思理论、边际理论、人类需求层次理论、生物学理论、心理学理论、社会管理学理论等理论在哲学层面完美融合了! 2019-08-26
  • 兰芝雪纱修颜气垫隔离霜 2019-07-27
  • “鹊桥”中继星顺利进入使命轨道运行 2019-07-27
  • 超越舆情管理的360度信息决策 2019-07-22
  • 视频陶然居变形记:从路边小饭馆到全国餐饮十强 2019-07-21
  • 防震减灾事业发展的重要理论成果 2019-07-20
  • 珠宝配美人!李冰冰大片衣着性感秀身段 2019-07-20
  • 机器人也能拥有“情商”?这个可以有 2019-07-19
  • pk10技巧34567定位 倍投彩票可靠吗 百变计划手机免费的 pt电子是什么意思 ag不同平台有时间差吗 旺旺时时彩官网预测 胆拖投注怎样算中奖 浙江省体育彩票11选五走势图 单机捕鱼达人4破解版 幸运飞艇龙虎倍投