前端關(guān)于JSON的stringify、parse和遍歷的性能比較

hiyang 發(fā)布于2019-08-23 17:50 / 2964人閱讀

摘要：在前端項(xiàng)目對(duì)數(shù)組，的拷貝，比較中，我們往往會(huì)去用，那么這樣做究竟好不好呢經(jīng)過一系列測(cè)試，發(fā)現(xiàn)用這種方式的性能是比較差的，下面是實(shí)驗(yàn)結(jié)果數(shù)組拷貝結(jié)果結(jié)果結(jié)果結(jié)果結(jié)果我們發(fā)現(xiàn)差距在四倍左右，當(dāng)數(shù)組變大基本也維持在這個(gè)比例遍歷對(duì)比結(jié)果結(jié)果

在前端項(xiàng)目對(duì)數(shù)組，map的拷貝，比較中，我們往往會(huì)去用json.stringify、json.parse，那么這樣做究竟好不好呢？
經(jīng)過一系列測(cè)試，發(fā)現(xiàn)用這種方式的性能是比較差的，下面是實(shí)驗(yàn)結(jié)果

1.數(shù)組拷貝

const a1 = new Array(1000000).fill("").map((e, index) => index)

function f1() {
    const start = new Date().getTime()
    const r = JSON.parse(JSON.stringify(a1))
    console.log("json結(jié)果", new Date().getTime() - start)
}

function f2() {
    const start = new Date().getTime()
    const r = [...a1]
    console.log("array結(jié)果", r == a1, new Date().getTime() - start)
}

f1()
f2()

結(jié)果：
json結(jié)果 104
array結(jié)果 false 35

我們發(fā)現(xiàn)差距在四倍左右，當(dāng)數(shù)組變大基本也維持在這個(gè)比例

2.遍歷對(duì)比

const map1 = {}
const map2 = {}
for (let i=0;i < 1000000;i++) {
    map1[i] = i
    map2[i] = i
}

function f1() {
    const start = new Date().getTime()
    const r = JSON.stringify(map1) == JSON.stringify(map2)
    console.log("json結(jié)果", r, new Date().getTime() - start)
}

function f2() {
    const start = new Date().getTime()
    const r = Object.keys(map1).every(key => {
        if (map2[key] || map2[key] === 0) {
            return true
        } else {
            return false
        }
    })
    console.log("array結(jié)果", r, new Date().getTime() - start)
}

f1()
f2()

結(jié)果：
json結(jié)果 true 506
array結(jié)果 true 140

基本上也是在四倍左右的差距

結(jié)尾

還有更多的測(cè)試沒做，但估計(jì)基本上也是這個(gè)差距，
其實(shí)說到底，用json的api底層也是遍歷過了，并且轉(zhuǎn)成字符串，所以性能會(huì)比較差
大家還是自己手寫的遍歷還是手寫，或者用第三方插件如lodash。不要一味用json api