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
相关推荐
耶啵奶膘1 小时前
uniapp-是否删除
linux·前端·uni-app
王哈哈^_^3 小时前
【数据集】【YOLO】【目标检测】交通事故识别数据集 8939 张,YOLO道路事故目标检测实战训练教程!
前端·人工智能·深度学习·yolo·目标检测·计算机视觉·pyqt
cs_dn_Jie3 小时前
钉钉 H5 微应用 手机端调试
前端·javascript·vue.js·vue·钉钉
开心工作室_kaic4 小时前
ssm068海鲜自助餐厅系统+vue(论文+源码)_kaic
前端·javascript·vue.js
有梦想的刺儿4 小时前
webWorker基本用法
前端·javascript·vue.js
cy玩具5 小时前
点击评论详情,跳到评论页面,携带对象参数写法:
前端
清灵xmf5 小时前
TypeScript 类型进阶指南
javascript·typescript·泛型·t·infer
小白学大数据5 小时前
JavaScript重定向对网络爬虫的影响及处理
开发语言·javascript·数据库·爬虫
qq_390161775 小时前
防抖函数--应用场景及示例
前端·javascript
无尽的大道6 小时前
Java反射原理及其性能优化
jvm·性能优化