[源码学习]前端缓存工具fast-memoize和nano-memoize

yeyan1996 发布于2019-08-23 11:50 / 704人阅读

摘要：至今天年月日，这个工具的实现源码思想是极其相似的，基本上，只要阅读了其中一个源码，也就了解了另外一个的实现。都对返回的缓存函数进行了参数注入这是一个极大提升性能的方法。不同点使用了无的对象，使用了普通对象这一点性能上相差不多。

至今天(2018年9月7日)，这2个工具的实现源码思想是极其相似的，基本上，只要阅读了其中一个源码，也就了解了另外一个的实现。

fast-memoize导图:

初识

大概说说它们的实现思路：

定义缓存结构，其中fast使用了无prototype的对象，nano使用了普通对象。

定义序列化方法：当检测到是单参数时，都是选择JSON.stringify，而多个参数，两者有不同（后面再说）。

定义策略：也就是缓存的具体方法，其实很简单，就是对当前缓存结构查找，找到就返回，找不到就重新运行，
两者都使用了bind方法注入参数，可以省去运行时再去查找参数。

接着分析两者的异同：

相同处：

都使用了JSON.stringify作为序列化方法，因为它是原生的。

都对返回的缓存函数进行了参数注入（这是一个极大提升性能的方法）。

对单参数还是多参数的判断都是使用func.length(形参的数量判断)，因为func.length比arguments.length这种动态判断性能会好很多。

不同点：

fast使用了无prototype的对象，nano使用了普通对象(这一点性能上相差不多)。

当遇到多个参数时，fast还是继续对arguments进行序列化，而nano则复杂一点，它通过用数组将每一次多个参数保存起来，

后续通过遍历每个参数进行全等对比===，判断是否从缓存调取结果。

同样是多个参数，nano增加了一个参数max，可以让用户自定义需要进行对比参数的长度。

深入

接着看下第二点不同点的源码：
主要看nano-memoize：

function multiple(f,k,v,eq,change,max=0,...args) {
      // 用来储存i(当前对比的参数索引)和缓存值
      const rslt = {};
      // k是一个专门存放多个参数的数组 格式类似
      // [[...args],[...args],[...args]...]
      for(let i=0;i=0 ? rslt.i : v.length;
      if(change) { change(i); }
      // 如果缓存不存在就执行func，存在直接返回缓存
      return typeof rslt.v === "undefined" ? v[i] = f.call(this,...(k[i] = args)) : rslt.v;
    }

可以看出，这是通过2次遍历，对 [[...args],[...args],[...args]...]这样一种结构比较，外层遍历判断length，
length相等才会进入内层遍历，内层遍历就是逐个判断了。

// 注入参数，提升性能
f = multiple.bind(
        this,
        fn,
        k,
        v,
        // 逐个判断方式默认为 ===
        equals || ((a,b) => a===b), // default to just a regular strict comparison
        (maxAge ? change.bind(this,v): null), // turn change logging on and bind to arg cache v
        maxArgs
      );

上面一段则是参数注入方式和默认的对比方式。

总结

一个表格总结两者最大不同，假设：

忽略===的执行时间

使用的参数分为引用相同和引用不同(但是深比较都为true)
例如：{x:1}和{x:1}

耗时操作	多个参数(引用相同)		多个参数(引用不同)
状态	首次运行	后续运行	首次运行	后续运行
fast	序列化+运行函数	序列化比较	序列化+运行函数	序列化比较
nano	运行函数	0(===比较)	运行函数	运行函数(===比较失败)

源码(带注释)仓库

云服务器 GPU云服务器前端工具 js缓存合并工具前端工具函数前端设计工具

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/97543.html

[源码学习]前端缓存工具fast-memoize和nano-memoize

摘要：至今天年月日，这个工具的实现源码思想是极其相似的，基本上，只要阅读了其中一个源码，也就了解了另外一个的实现。都对返回的缓存函数进行了参数注入这是一个极大提升性能的方法。不同点使用了无的对象，使用了普通对象这一点性能上相差不多。至今天(2018年9月7日)，这2个工具的实现源码思想是极其相似的，基本上，只要阅读了其中一个源码，也就了解了另外一个的实现。 fast-memoize导图: ...

KoreyLee 2019-08-06 13:36 评论0 收藏0
原理解释 - 收藏集 - 掘金

摘要：巧前端基础进阶全方位解读前端掘金我们在学习的过程中，由于对一些概念理解得不是很清楚，但是又想要通过一些方式把它记下来，于是就很容易草率的给这些概念定下一些方便自己记忆的有偏差的结论。计算机程序的思维逻辑 (83) - 并发总结 - 掘金从65节到82节，我们用了18篇文章讨论并发，本节进行简要总结。多线程开发有两个核心问题，一个是竞争，另一个是协作。竞争会出现线程安全问题，所以，本...

AlphaGooo 2019-08-21 11:41 评论0 收藏0
原理解释 - 收藏集 - 掘金

摘要：巧前端基础进阶全方位解读前端掘金我们在学习的过程中，由于对一些概念理解得不是很清楚，但是又想要通过一些方式把它记下来，于是就很容易草率的给这些概念定下一些方便自己记忆的有偏差的结论。计算机程序的思维逻辑 (83) - 并发总结 - 掘金从65节到82节，我们用了18篇文章讨论并发，本节进行简要总结。多线程开发有两个核心问题，一个是竞争，另一个是协作。竞争会出现线程安全问题，所以，本...

forrest23 2019-08-16 10:36 评论0 收藏0
2017文章总结

摘要：欢迎来我的个人站点性能优化其他优化浏览器关键渲染路径开启性能优化之旅高性能滚动及页面渲染优化理论写法对压缩率的影响唯快不破应用的个优化步骤进阶鹅厂大神用直出实现网页瞬开缓存网页性能管理详解写给后端程序员的缓存原理介绍年底补课缓存机制优化动欢迎来我的个人站点性能优化其他优化浏览器关键渲染路径 - 开启性能优化之旅高性能滚动 scroll 及页面渲染优化理论 | HTML写法...

dailybird 2019-08-01 18:28 评论0 收藏0
2017文章总结

摘要：欢迎来我的个人站点性能优化其他优化浏览器关键渲染路径开启性能优化之旅高性能滚动及页面渲染优化理论写法对压缩率的影响唯快不破应用的个优化步骤进阶鹅厂大神用直出实现网页瞬开缓存网页性能管理详解写给后端程序员的缓存原理介绍年底补课缓存机制优化动欢迎来我的个人站点性能优化其他优化浏览器关键渲染路径 - 开启性能优化之旅高性能滚动 scroll 及页面渲染优化理论 | HTML写法...

hellowoody 2019-08-22 14:02 评论0 收藏0