JS性能优化之函数唯一标识以及自记忆函数

历史小剧场

朱元璋在平定天下前,曾向谋士征求意见。有一位名叫朱升的学者,告诉朱元璋"高筑墙,广积粮,缓称王"。这条策略在朱元璋最终取得胜利的道路中发挥了重要的作用。

知识铺垫

函数可以像对象一样,动态创建和分配属性
对象拥有的,函数都有
唯一的区别是:函数是可调用的,即函数会被调用然后去执行某项动作

  • 函数可以通过字面量来创建
js 复制代码
function fn () {}
  • 函数可以赋值给变量、数组项,或其他对象的属性。
js 复制代码
const fn2 = function () {}

const arr2 = []
arr2.push(fn2)

const obj2 = {}
obj2.fn = fn2;
  • 函数可以作为函数的入参和出参。
js 复制代码
function fn3 (callback) {
  callback()
}
fn3(() => console.log('hello'))
  • 函数可以动态创建和分配属性
js 复制代码
function fn4 () {}
fn4.name = 'fn4'
fn4.age = 18
console.log(fn4) //[Function: fn4] { age: 18 }

函数唯一标识

给函数设置一个 id 属性,作为唯一标识,在某些情况下可以提高性能,比如,

一个集合中的函数,不希望出现重复函数。

js 复制代码
const store = {
    nextId: 1,
    cache: {},
    add(fn) {
        console.log("fn.id => ", fn.id)
        if (!fn.id) {
            fn.id = store.nextId++
            this.cache[fn.id] = fn
        }
    }
}
const fun1 = function () {}
const fun2 = function () {}
store.add(fun1)
store.add(fun1)
store.add(fun2)
console.log(store.cache)  // { '1': [Function: fun1] { id: 1 }, '2': [Function: fun2] { id: 2 } }

注意:ES6 的箭头函数是一种匿名函数的简写,它们不具有自己的 this、arguments、super 或 new.target。由于箭头函数的特性,它们不支持添加属性。

自记忆函数

过给函数添加属性来记住一些计算结果,之后再调用的时候就可以不用重新计算了,直接去属性中的数据,提高性能。(类似于缓存)以计算素数为例

js 复制代码
function isPrime(value) {
    if (!isPrime.cache) {
        // 给函数添加一个 cache 来存储计算结果
        isPrime.cache = {}
    }
    if (isPrime.cache[value] !== undefined) {
        console.log(`命中缓存${value},直接返回${isPrime.cache[value]}`)
        return isPrime.cache[value]
    }
    let prime = value > 2;
    for (let i = 2; i < value; i++) {
        if (value % i === 0) {
            prime = false;
            break;
        }
    }
    console.log(`缓存里没有${value},结果${prime}存进去`)
    return isPrime.cache[value] = prime;  // 先执行 isPrime.cache[value] = prime, 然后执行 return isPrime.cache[value]
}
isPrime(3) // 缓存里没有3,结果true存进去
isPrime(4) // 缓存里没有4,结果false存进去
isPrime(5) // 缓存里没有5,结果true存进去
isPrime(10) // 缓存里没有10,结果false存进去
isPrime(10) // 命中缓存10,直接返回false
isPrime(5) // 命中缓存5,直接返回true
相关推荐
土豆湿7 分钟前
拥抱极简主义前端开发:NoCss.js 引领无 CSS 编程潮流
开发语言·javascript·css
J总裁的小芒果15 分钟前
Vue3 el-table 默认选中 传入的数组
前端·javascript·elementui·typescript
Lei_zhen9618 分钟前
记录一次electron-builder报错ENOENT: no such file or directory, rename xxxx的问题
前端·javascript·electron
辣条小哥哥19 分钟前
electron主进程和渲染进程之间的通信
javascript·electron·ecmascript
咖喱鱼蛋20 分钟前
Electron一些概念理解
前端·javascript·electron
yqcoder22 分钟前
Vue3 + Vite + Electron + TS 项目构建
前端·javascript·vue.js
鑫宝Code39 分钟前
【React】React Router:深入理解前端路由的工作原理
前端·react.js·前端框架
Mr_Xuhhh2 小时前
重生之我在学环境变量
linux·运维·服务器·前端·chrome·算法
永乐春秋3 小时前
WEB攻防-通用漏洞&文件上传&js验证&mime&user.ini&语言特性
前端
鸽鸽程序猿3 小时前
【前端】CSS
前端·css