提升JavaScript遞迴效率：Memoization（避免重複運算）技術詳解
遞迴是拖慢指令碼執行速度的大敵之一。太多的遞迴會讓瀏覽器變得越來越慢直到死掉或者莫名其妙的突然自動退出，所以我們一定要解決在JavaScript中出現的這一系列效能問題。
我們可以通過memoization技術來替代函式中太多的遞迴呼叫。memoization是一種可以快取之前運算結果的技術，這樣我們就不需要重新計算那些已經計算過的結果。
對於通過遞迴來進行計算的函式，memoization簡直是太有用了。我現在使用的memoizer是由Crockford寫的，主要應用在那些返回整數的遞迴運算中。當然並不是所有的遞迴函式都返回整數，所以我們需要一個更加通用的memoizer()函式來處理更多型別的遞迴函式。
- function memoizer(fundamental, cache) {
- cachecache = cache || {};
- var shell = function(arg) {
- if (! (arg in cache)) {
- cache[arg] = fundamental(shell, arg);
- }
- return cache[arg];
- };
- return shell;
- }
這個版本的函式和Crockford寫的版本有一點點不同。首先，引數的順序被顛倒了，原有函式被設定為第一個引數，第二個引數是快取物件，為可選引數，因為並不是所有的遞迴函式都包含初始資訊。在函式內部，我將快取物件的型別從陣列轉換為物件，這樣這個版本就可以適應那些不是返回整數的遞迴函式。在shell函式裡，我使用了in操作符來判斷引數是否已經包含在快取裡。這種寫法比測試型別不是undefined更加安全，因為undefined是一個有效的返回值。我們還是用之前提到的斐波納契數列來做說明：
- var fibonacci = memoizer(function(recur, n) {
- return recur(n - 1) + recur(n - 2);
- }, { "0": 0, "1": 1} );
同樣的，執行fibonacci(40)這個函式，只會對原有的函式呼叫40次，而不是誇張的331,160,280次。memoization對於那些有著嚴格定義的結果集的遞迴演算法來說，簡直是棒極了。然而，確實還有很多遞迴演算法不適合使用memoization方法來進行優化。
有的觀點認為，任何使用遞迴的情況，如果有需要，都可以使用迭代來代替。實際上，遞迴和迭代經常會被作為互相彌補的方法，尤其是在另外一種 出問題的情況下。將遞迴演算法轉換為迭代演算法的技術，也是和開發語言無關的。這對JavaScript來說是很重要的，因為很多東西在執行環境中是受到限制的。讓我們回顧一個典型的遞迴演算法，比如說歸併排序，在JavaScript中實現這個演算法需要下面的程式碼：
- function merge(left, right) {
- var result = [];
- while (left.length > 0 && right.length > 0) {
- if (left[0] <right[0]) {
- result.push(left.shift());
- } else {
- result.push(right.shift());
- }
- }
- return result.concat(left).concat(right);
- }
- //採用遞迴實現的歸併排序演算法
- function mergeSort(items) {
- if (items.length == 1) {
- return items;
- }
- var middle = Math.floor(items.length / 2),
- left = items.slice(0, middle),
- right = items.slice(middle);
- return merge(mergeSort(left), mergeSort(right));
- }
呼叫mergeSort()函式處理一個數組，就可以返回經過排序的陣列。注意每次呼叫mergeSort()函式，都會有兩次遞迴呼叫。這個演算法不可以使用memoization來進行優化，因為每個結果都只計算並使用一次，就算緩衝了結果也沒有什麼用。如果你使用mergeSort()函式來處理一個包含100個元素的陣列，總共會有199次呼叫。1000個元素的陣列將會執行1999次呼叫。在這種情況下，我們的解決方案是將遞迴演算法轉換為迭代演算法，也就是說要引入一些迴圈：
- // 採用迭代實現的歸併排序演算法
- function mergeSort(items) {
- if (items.length == 1) {
- return items;
- }
- var work = [];
- for (var i = 0,
- len = items.length; i <len; i++) {
- work.push([items[i]]);
- }
- work.push([]); //in case of odd number of items
- for (var lim = len; lim > 1; lim = (lim + 1) / 2) {
- for (var j = 0,
- k = 0; k <lim; j++, k += 2) {
- work[j] = merge(work[k], work[k + 1]);
- }
- work[j] = []; //in case of odd number of items
- }
- return work[0];
- }
這個歸併排序演算法實現使用了一系列迴圈來代替遞迴進行排序。由於歸併排序首先要將陣列拆分成若干只有一個元素的陣列，這個方法更加明確的執行了這個操作，而不是通過遞迴函式隱晦的完成。work陣列被初始化為包含一堆只有一個元素陣列的陣列。
在迴圈中每次會合並兩個陣列，並將合併後的結果放回work陣列中。當函式執行完成後，排序的結果會通過work陣列中的第一個元素返回。在這個歸併排序的實現中，沒有使用任何遞迴，同樣也實現了這個演算法。
備註----------------------------------------------------------------------------------------------
Memoization 是一種將函式返回值快取起來的方法，在 Lisp, Ruby, Perl, Python 等語言中使用非常廣泛。隨著 Ajax 的興起，客戶端對伺服器的請求越來越密集（經典如 autocomplete），如果有一個良好的快取機制，那麼客戶端 JavaScript 程式的效率的提升是顯而易見的。
Memoization 原理非常簡單，就是把函式的每次執行結果都放入一個散列表中，在接下來的執行中，在散列表中查詢是否已經有相應執行過的值，如果有，直接返回該值，沒有才真正執行函式體的求值部分。很明顯，找值，尤其是在雜湊中找值，比執行函式快多了。現代 JavaScript 的開發也已經大量使用這種技術。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<title>JavaScript Memoization</title>
<script type="text/javascript">
/**
* JavaScript Momoization
* @param {string} func name of function / method
* @param {object} [obj] mothed's object or scope correction object
*
* MIT / BSD license
*/
function Memoize(func, obj){
var obj = obj || window,
func = obj[func],
cache = {};
return function(){
var key = Array.prototype.join.call(arguments, '_');
if (!(key in cache))
cache[key] = func.apply(obj, arguments);
return cache[key];
}
}
var fib = {
fib: function(n){
if (n == 0 || n == 1)
return 1;
return this.fib(n-1) + this.fib(n-2);
},
fib_memo: function(n){
if (n == 0 || n == 1)
return 1;
return this.fib_memo(n-1) + this.fib_memo(n-2);
}
}
fib.fib_memo = Memoize('fib_memo', fib);
function get(id){
return document.getElementById(id);
}
function test(el, func, scope, arg){
if ('string' == typeof el) el = get(el);
el.onclick = function(){
var start = (new Date()).getTime();
var result = func.call(scope, arg);
var end = (new Date()).getTime();
this.nextSibling.innerHTML = '結果為 ' + result + '，耗時 ' + (end-start) + 'ms';
}
}
window.onload = function(){
test('fib', fib.fib, fib, 30);
test('fib_memo', fib.fib_memo, fib, 30);
}
</script>
</head>
<body>
<h1>JavaScript Memoization</h1>
<h2>Snippets</h2>
<pre class="brush:javascript;gutter:false;toolbar:false">
/**
* JavaScript Momoization
* @param {string} func name of function / method
* @param {object} [obj] mothed's object or scope correction object
*
* MIT / BSD license
*/
function Memoize(func, obj){
var obj = obj || window,
func = obj[func],
cache = {};
return function(){
var key = Array.prototype.join.call(arguments, '_');
if (!(key in cache))
cache[key] = func.apply(obj, arguments);
return cache[key];
}
}
var fib = {
fib: function(n){
if (n == 0 || n == 1)
return 1;
return this.fib(n-1) + this.fib(n-2);
},
fib_memo: function(n){
if (n == 0 || n == 1)
return 1;
return this.fib_memo(n-1) + this.fib_memo(n-2);
}
}
fib.fib_memo = Memoize('fib_memo', fib);
</pre>
<p><button id="fib">測試 <code>fib.fib(30)</code></button><b></b></p>
<p><button id="fib_memo">測試 <code>fib.fib_memo(30)</code></button><b></b></p>
</body>
</html>
-------------------------------------------------------------------------------------------------------------------------------------------