2023年11月14日
By: Chase
js性能优化之各种函数比较
前言
运行在线编辑的的js需要能qiang
现阶段的项目, 前端都存在高频率(每秒10次以上), 大数据量(10的5次方及以上)的数据函数处理.
平时一些无所谓性能的js函数在这种情况下, 通过Performance
(就是下面那个图里的)优化测试, 优化就显得相对有必要了.
之前优化过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)
})