JSON.parse()和JSON.stringify()的性能测试(示例)


本文摘自PHP中文网,作者不言,侵删。

本篇文章给大家带来的内容是关于JSON.parse()和JSON.stringify()的性能测试(示例),有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助。

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

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

1

2

3

4

5

6

7

8

9

10

11

/**

 * 一个简单的断言函数

 * @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);

}

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

/**

 * 一个测试套件,定时器是为了多次执行减少误差

 * @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);

}

定义一些初始数据

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

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:模拟真实环境中图表数据实时更新

数据处理函数

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

/**

 * 处理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次

1

2

3

4

5

let jsonTest = function () {

    jsonData = handleJsonData(jsonData, res);

};

 

intervalTest(jsonTest, {maxCount: 100});

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

阅读剩余部分

相关阅读 >>

javascript中作用域的详细介绍(代码示例)

javascript如何实现json字符串与对象转换

js遇到代码出现问题时调试代码的方法

如何在网页中引入外部js文件和css样式文件

javascript中如何使用prompt方法

javascript向php传递中文乱码怎么办

javascript警告框怎么消除

javascript字符串怎么替换字符

javascript数组方法有哪些

js怎么替换字符串?

更多相关阅读请进入《javascript》频道 >>




打赏

取消

感谢您的支持,我会继续努力的!

扫码支持
扫码打赏,您说多少就多少

打开支付宝扫一扫,即可进行扫码打赏哦

分享从这里开始,精彩与您同在

评论

管理员已关闭评论功能...