2023年11月14日
By: Chase

js性能优化之各种函数比较

前言

运行在线编辑的的js需要能qiang

现阶段的项目, 前端都存在高频率(每秒10次以上), 大数据量(10的5次方及以上)的数据函数处理.

平时一些无所谓性能的js函数在这种情况下, 通过Performance (就是下面那个图里的)优化测试, 优化就显得相对有必要了.

图-0

之前优化过toFixed(), 这次又在考虑array.push(1)[...array, 1]谁性能更优, 干脆就开一篇专门比较各种自己处理比较过的js函数.

测试函数

循环执行一个函数loopTimes次, 输出执行完的时间.

以下函数可直接执行, 别把loopTimes搞太大, 一般8以上就比较耗时了.

const loopToTest = ({
    loopTimes = 1e5,
    func,
    funcB
}) => {
    const start = window.performance.now()
    for (let i = 0; i < loopTimes; i += 1) {
        func()
    }
    console.log('time spend', window.performance.now() - start, 'ms')

    // 和另一个比较
    if (funcB) {
        loopToTest({
            loopTimes,
            func: funcB
        })
    }
}

// demo
loopToTest({
    func: () => 1 + 1
})

比较用例(持续添加)

优化toFixed

const loopToTest = ({
    loopTimes = 1e5,
    func,
    funcB
}) => {
    const start = window.performance.now()
    for (let i = 0; i < loopTimes; i += 1) {
        func()
    }
    console.log('time spend', window.performance.now() - start, 'ms')

    // 和另一个比较
    if (funcB) {
        loopToTest({
            loopTimes,
            func: funcB
        })
    }
}

const newFixed = (floatNum, digitNum) => {
    const strNum = `${floatNum}`
    const dotIdx = strNum.indexOf('.')
    const withDigitIdx = dotIdx + digitNum + 1
    if (dotIdx !== -1) {
        const strNumLen = strNum.length
        // 实际小数多余保留的位数, 截取
        if (withDigitIdx < strNumLen) {
            return strNum.slice(0, withDigitIdx)
        }
        // 实际小数等于保留的位数, 直接返回
        if (withDigitIdx === strNumLen) {
            return strNum
        }
        // 实际小数等于保留的位数, 补零
        let moreZero = ''
        for (let i = 0; i < withDigitIdx - strNumLen; i += 1) {
            moreZero = `${moreZero}0`
        }
        return `${strNum}${moreZero}`
    }

    let dotNum = '.'
    for (let i = 0; i < digitNum; i += 1) {
        dotNum = `${dotNum}0`
    }
    return `${strNum}${dotNum}`
}

loopToTest({
    loopTimes: 1e7,
    func: () => newFixed(1.2345, 2),
    funcB: () => 1.2345.toFixed(2)
})
Tags: 前端 js 性能