Home > Web Front-end > JS Tutorial > Performance test of JSON.parse() and JSON.stringify() (example)

Performance test of JSON.parse() and JSON.stringify() (example)

不言
Release: 2019-03-14 11:40:34
forward
2757 people have browsed it

This article brings you the performance test (example) of JSON.parse() and JSON.stringify(). It has certain reference value. Friends in need can refer to it. I hope it will be helpful to you. helped.

JSON.parse(JSON.stringify(obj)) We generally use it for deep copying. To put it bluntly, the process is to use JSON.stringify to serialize js objects (JSON strings), and then use JSON.parse To deserialize (restore) js objects. As for why this line of code can achieve deep copy, what its limitations are, etc., this article does not introduce it. What this article wants to explore is, how efficient is the execution of this line of code? Will it cause any problems if used casually?

First two dependency functions for js performance testing

/**
 * 一个简单的断言函数
 * @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);
}
Copy after login
/**
 * 一个测试套件,定时器是为了多次执行减少误差
 * @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  p + c) / times;
            let p = document.createElement('p');
            p.innerHTML = `for循环:${maxCount}次,定时器执行:${times}次,平均值:${average} ms`;
            document.body.appendChild(p);
        }
    }, 1000);
}
Copy after login

Define some initial data

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
    },
];
Copy after login

Scenario 1: Simulate real-time update of chart data in a real environment

Data processing function

/**
 * 处理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 <h4>maxCount=100</h4><p>Run it, first let maxCount=100, and loop for 100 times</p><pre class="brush:php;toolbar:false">let jsonTest = function () {
    jsonData = handleJsonData(jsonData, res);
};

intervalTest(jsonTest, {maxCount: 100});
Copy after login

1. Use JSON.parse(JSON.stringify ()) The result of deep copy:

Performance test of JSON.parse() and JSON.stringify() (example)

2. The result of directly modifying parameters without using JSON serialization:

function handleJsonData(lastData, res) {
    // 1. 使用 JSON.parse(JSON.stringify()) 深拷贝
    // let data = JSON.parse(JSON.stringify(lastData));

    // 2. 不使用JSON序列化,直接修改参数
    let data = lastData;
    
    // ...
}
Copy after login

Performance test of JSON.parse() and JSON.stringify() (example)

maxCount=1000

intervalTest(jsonTest, {maxCount: 1000});
Copy after login

1. Use JSON.parse(JSON.stringify()) deep copy result:

Performance test of JSON.parse() and JSON.stringify() (example)

2. Do not use JSON serialization, the result of directly modifying parameters:

Performance test of JSON.parse() and JSON.stringify() (example)

maxCount=10000

intervalTest(jsonTest, {maxCount: 10000});
Copy after login

1. Use JSON.parse(JSON.stringify()) deep copy The result:

Performance test of JSON.parse() and JSON.stringify() (example)

#2. Without using JSON serialization, the result of directly modifying the parameters:

Performance test of JSON.parse() and JSON.stringify() (example)

Scenario 2: Determine whether an object is an empty object

// 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
    }
};
Copy after login

Just go through the judgment conditions, there is no execution code inside the if

maxCount=1000

1. Use JSON.stringify() to judge The result of whether an object is an empty object:

intervalTest(isEmptyObject1, {maxCount: 1000});
Copy after login

Performance test of JSON.parse() and JSON.stringify() (example)

2. Use Object.keys().length to determine whether an object is an empty object. :

intervalTest(isEmptyObject2, {maxCount: 1000});
Copy after login

Performance test of JSON.parse() and JSON.stringify() (example)

maxCount=10000

1. The result of using JSON.stringify() to determine whether an object is an empty object:
Performance test of JSON.parse() and JSON.stringify() (example)

2. Use Object.keys().length to determine whether an object is an empty object. The result:

Performance test of JSON.parse() and JSON.stringify() (example)

maxCount=100000

1. Use JSON.stringify() to determine whether an object is an empty object. The result:

Performance test of JSON.parse() and JSON.stringify() (example)

2. Use Object.keys().length to determine whether an object is an empty object. The result:

Performance test of JSON.parse() and JSON.stringify() (example)

The tests on JSON.parse() and JSON.stringify() end here. Changing parameters and changing the executed code block may have different results. , the above results are for reference only.

Small conclusion: If you can not use JSON.parse() and JSON.stringify(), just use alternatives with better performance. PS: Especially code blocks that need to be executed multiple times, especially when the JSON data is relatively large

There is more knowledge about JSON.parse() and JSON.stringify() waiting for you. Go dig and welcome everyone to communicate and learn together~

About JSON.parse(JSON.stringify(obj)): About the pitfalls that should be paid attention to when implementing deep copy of JSON.parse(JSON.stringify(obj))
About deep copy: The ultimate exploration of deep copy (99% of people don’t know)



The above is the detailed content of Performance test of JSON.parse() and JSON.stringify() (example). For more information, please follow other related articles on the PHP Chinese website!

Related labels:
source:segmentfault.com
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template