摘要:至今天年月日,這個工具的實現源碼思想是極其相似的,基本上,只要閱讀了其中一個源碼,也就了解了另外一個的實現。都對返回的緩存函數進行了參數注入這是一個極大提升性能的方法。不同點使用了無的對象,使用了普通對象這一點性能上相差不多。
至今天(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(===比較) | 運行函數 | 運行函數(===比較失敗) |
源碼(帶注釋)倉庫
文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。
轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/97543.html
摘要:至今天年月日,這個工具的實現源碼思想是極其相似的,基本上,只要閱讀了其中一個源碼,也就了解了另外一個的實現。都對返回的緩存函數進行了參數注入這是一個極大提升性能的方法。不同點使用了無的對象,使用了普通對象這一點性能上相差不多。 至今天(2018年9月7日),這2個工具的實現源碼思想是極其相似的,基本上,只要閱讀了其中一個源碼,也就了解了另外一個的實現。 fast-memoize導圖: ...
摘要:巧前端基礎進階全方位解讀前端掘金我們在學習的過程中,由于對一些概念理解得不是很清楚,但是又想要通過一些方式把它記下來,于是就很容易草率的給這些概念定下一些方便自己記憶的有偏差的結論。 計算機程序的思維邏輯 (83) - 并發總結 - 掘金從65節到82節,我們用了18篇文章討論并發,本節進行簡要總結。 多線程開發有兩個核心問題,一個是競爭,另一個是協作。競爭會出現線程安全問題,所以,本...
摘要:巧前端基礎進階全方位解讀前端掘金我們在學習的過程中,由于對一些概念理解得不是很清楚,但是又想要通過一些方式把它記下來,于是就很容易草率的給這些概念定下一些方便自己記憶的有偏差的結論。 計算機程序的思維邏輯 (83) - 并發總結 - 掘金從65節到82節,我們用了18篇文章討論并發,本節進行簡要總結。 多線程開發有兩個核心問題,一個是競爭,另一個是協作。競爭會出現線程安全問題,所以,本...
摘要:歡迎來我的個人站點性能優化其他優化瀏覽器關鍵渲染路徑開啟性能優化之旅高性能滾動及頁面渲染優化理論寫法對壓縮率的影響唯快不破應用的個優化步驟進階鵝廠大神用直出實現網頁瞬開緩存網頁性能管理詳解寫給后端程序員的緩存原理介紹年底補課緩存機制優化動 歡迎來我的個人站點 性能優化 其他 優化瀏覽器關鍵渲染路徑 - 開啟性能優化之旅 高性能滾動 scroll 及頁面渲染優化 理論 | HTML寫法...
閱讀 1303·2021-11-11 10:57
閱讀 3717·2021-09-07 10:10
閱讀 3442·2021-08-03 14:03
閱讀 3067·2019-08-30 13:45
閱讀 681·2019-08-29 11:19
閱讀 1039·2019-08-28 18:07
閱讀 3100·2019-08-26 13:55
閱讀 809·2019-08-26 12:17