• 机器人也能拥有“情商”?这个可以有 2019-07-19
  • 重庆“轮椅教师”高位截瘫仍坚守讲台 2019-07-07
  • 百度车联网携手宝马 合作伙伴全面升级为国际OEM厂商 2019-07-01
  • 全面从严治党永远在路上——辽宁代表团开放日侧记 2019-07-01
  • 【学习时刻】华侨大学黄日涵:“一带一路”盛会开启合作发展新篇章 2019-06-24
  • 秒变迷弟!吴建豪晒与甄子丹合影:偶像给我签名 2019-06-20
  • 军统头目戴笠留下哪些巨额遗产 令蒋介石身边人惊诧 2019-06-20
  • 初春喝藿香汤 解表化湿,散寒温经 2019-06-18
  • 新华时评:磋商,不等于反复折腾 2019-06-09
  • 天山特克斯峡谷 中国国家地理网 2019-06-08
  • 端午小长假珠海口岸将迎双向客流高峰 2019-06-08
  • 王朝崩塌!恒大半个月内双线出局 卡帅敲响下课警钟 2019-06-07
  • 一周人事:国务院发布任免刘伟当选北京市总工会主席 2019-06-07
  • 敞篷式设计 日产聆风Open Car官图发布 2019-06-06
  • 习近平为传统文化“代言” 2019-06-05
  • 香港赛马会官方网大陆手机服务站:详解关于JSON.parse()和JSON.stringify()的性能小测试

    香港赛马会网站惠泽社绝杀八码 www.mwcrz.tw  更新时间:2019年03月14日 09:18:51   作者:ican   我要评论

    这篇文章主要介绍了详解关于JSON.parse()和JSON.stringify()的性能小测试,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧

    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数据比较庞大时

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

    相关文章

    • WordPress中鼠标悬停显示和隐藏评论及引用按钮的实现

      WordPress中鼠标悬停显示和隐藏评论及引用按钮的实现

      这篇文章主要介绍了WordPress中鼠标悬停显示和隐藏评论及引用按钮的实现,顺带显示和隐藏评论者信息的实现方法,非常实用,需要的朋友可以参考下
      2016-01-01
    • JavaScript截取字符串的2个函数介绍

      JavaScript截取字符串的2个函数介绍

      这篇文章主要介绍了JavaScript截取字符串的2个函数介绍,它们分别是substring和substr函数,本文用实例讲解了它们的用法,需要的朋友可以参考下
      2014-08-08
    • JavaScript具有类似Lambda表达式编程能力的代码(改进版)

      JavaScript具有类似Lambda表达式编程能力的代码(改进版)

      在之前的一篇博文中我介绍了一种方法可以让JavaScript具有一种近似于Lambda表达式的编程能力——但是它有一些缺点,其中妨碍它的使用的最主要的一条就是多了一层括号,让代码变得难以阅读。
      2010-09-09
    • JavaScript操作XML/HTML比较常用的对象属性集锦

      JavaScript操作XML/HTML比较常用的对象属性集锦

      本文给大家介绍javascript操作xml/html比较常用的对象属性,涉及到js对象属性相关知识,对JavaScript操作XML/HTML比较常用的对象属性感兴趣的朋友可以参考下本文
      2015-10-10
    • React学习笔记之列表渲染示例详解

      React学习笔记之列表渲染示例详解

      最近在学习React,学习到了列表渲染这一块,发现网上这方面的资料较少,所以自己来总结下,下面这篇文章主要给大家介绍了关于React学习笔记之列表渲染的相关资料,文中通过示例代码介绍的非常详细,需要的朋友可以参考借鉴,下面来一起看看吧。
      2017-08-08
    • javascript实现获取浏览器版本、浏览器类型

      javascript实现获取浏览器版本、浏览器类型

      这篇文章主要介绍了javascript实现获取浏览器版本,javascript实现获取浏览器类型两大方面,对这方面感兴趣的朋友可以参考一下
      2015-12-12
    • JavaScript错误处理操作实例详解

      JavaScript错误处理操作实例详解

      这篇文章主要介绍了JavaScript错误处理操作,结合实例形式分析了javascript常见的错误类型、错误处理语句以及相关使用技巧,需要的朋友可以参考下
      2019-01-01
    • js获取隐藏元素的宽高

      js获取隐藏元素的宽高

      本文主要介绍了使用js获取隐藏元素宽高的解决方案以及代码思路,具有很好的参考价值,下面跟着小编一起来看下吧
      2017-02-02
    • JavaScript常见鼠标事件与用法分析

      JavaScript常见鼠标事件与用法分析

      这篇文章主要介绍了JavaScript常见鼠标事件与用法,结合实例形式较为详细的分析了javascript 8种常见的鼠标事件与相关使用技巧,需要的朋友可以参考下
      2019-01-01
    • 微信小程序实现分享到朋友圈功能

      微信小程序实现分享到朋友圈功能

      这篇文章主要为大家详细介绍了微信小程序实现分享到朋友圈功能,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
      2018-07-07

    最新评论

  • 机器人也能拥有“情商”?这个可以有 2019-07-19
  • 重庆“轮椅教师”高位截瘫仍坚守讲台 2019-07-07
  • 百度车联网携手宝马 合作伙伴全面升级为国际OEM厂商 2019-07-01
  • 全面从严治党永远在路上——辽宁代表团开放日侧记 2019-07-01
  • 【学习时刻】华侨大学黄日涵:“一带一路”盛会开启合作发展新篇章 2019-06-24
  • 秒变迷弟!吴建豪晒与甄子丹合影:偶像给我签名 2019-06-20
  • 军统头目戴笠留下哪些巨额遗产 令蒋介石身边人惊诧 2019-06-20
  • 初春喝藿香汤 解表化湿,散寒温经 2019-06-18
  • 新华时评:磋商,不等于反复折腾 2019-06-09
  • 天山特克斯峡谷 中国国家地理网 2019-06-08
  • 端午小长假珠海口岸将迎双向客流高峰 2019-06-08
  • 王朝崩塌!恒大半个月内双线出局 卡帅敲响下课警钟 2019-06-07
  • 一周人事:国务院发布任免刘伟当选北京市总工会主席 2019-06-07
  • 敞篷式设计 日产聆风Open Car官图发布 2019-06-06
  • 习近平为传统文化“代言” 2019-06-05
  • 江苏十一选五开奖结 内蒙古时时彩走势图彩经网 炉石传说纳克萨玛斯 王者捕鱼现金版 法甲圣埃蒂安对尼姆 西班牙人英语 qq地下城勇士点亮图标点亮 辽宁11选5开奖号码历史查询 香港六合图库 pc蛋蛋预测