提升JavaScript递归效率：Memoization（避免重复运算）技术详解
2012-11-28 16:59
573 查看
递归是拖慢脚本运行速度的大敌之一。太多的递归会让浏览器变得越来越慢直到死掉或者莫名其妙的突然自动退出，所以我们一定要解决在JavaScript中出现的这一系列性能问题。
我们可以通过memoization技术来替代函数中太多的递归调用。memoization是一种可以缓存之前运算结果的技术，这样我们就不需要重新计算那些已经计算过的结果。
对于通过递归来进行计算的函数，memoization简直是太有用了。我现在使用的memoizer是由Crockford写的，主要应用在那些返回整数的递归运算中。当然并不是所有的递归函数都返回整数，所以我们需要一个更加通用的memoizer()函数来处理更多类型的递归函数。
这个版本的函数和Crockford写的版本有一点点不同。首先，参数的顺序被颠倒了，原有函数被设置为第一个参数，第二个参数是缓存对象，为可选参数，因为并不是所有的递归函数都包含初始信息。在函数内部，我将缓存对象的类型从数组转换为对象，这样这个版本就可以适应那些不是返回整数的递归函数。在shell函数里，我使用了in操作符来判断参数是否已经包含在缓存里。这种写法比测试类型不是undefined更加安全，因为undefined是一个有效的返回值。我们还是用之前提到的斐波纳契数列来做说明：
同样的，执行fibonacci(40)这个函数，只会对原有的函数调用40次，而不是夸张的331,160,280次。memoization对于那些有着严格定义的结果集的递归算法来说，简直是棒极了。然而，确实还有很多递归算法不适合使用memoization方法来进行优化。
有的观点认为，任何使用递归的情况，如果有需要，都可以使用迭代来代替。实际上，递归和迭代经常会被作为互相弥补的方法，尤其是在另外一种 出问题的情况下。将递归算法转换为迭代算法的技术，也是和开发语言无关的。这对JavaScript来说是很重要的，因为很多东西在执行环境中是受到限制的。让我们回顾一个典型的递归算法，比如说归并排序，在JavaScript中实现这个算法需要下面的代码：
调用mergeSort()函数处理一个数组，就可以返回经过排序的数组。注意每次调用mergeSort()函数，都会有两次递归调用。这个算法不可以使用memoization来进行优化，因为每个结果都只计算并使用一次，就算缓冲了结果也没有什么用。如果你使用mergeSort()函数来处理一个包含100个元素的数组，总共会有199次调用。1000个元素的数组将会执行1999次调用。在这种情况下，我们的解决方案是将递归算法转换为迭代算法，也就是说要引入一些循环：
这个归并排序算法实现使用了一系列循环来代替递归进行排序。由于归并排序首先要将数组拆分成若干只有一个元素的数组，这个方法更加明确的执行了这个操作，而不是通过递归函数隐晦的完成。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>
-------------------------------------------------------------------------------------------------------------------------------------------
我们可以通过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>
-------------------------------------------------------------------------------------------------------------------------------------------
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- 提升JavaScript递归效率：Memoization技术详解[转载]
- 如何提升JavaScript的递归效率
- 如何提升JavaScript的递归效率
- 提升JavaScript递归效率：Memoization技术
- 提升JavaScript递归效率：Memoization技术详解
- 提升JavaScript递归效率：Memoization技术详解
- [转帖]如何提升JavaScript操作DOM的效率
- 效率： 条款21 利用重载技术避免隐式类型转换（implicit type conversions）
- 预编译头文件&Time Stamp——避免重复编译，提高编译效率
- 第六章：提升感光效率什么方法强？Q-lens技术可帮忙
- JavaScript中避免Form重复提交几个方法
- JavaScript执行效率与性能提升方案（转）
- 基于“ViewHolder”技术提升Android ListView中Item View加载效率
- [SQL]提升查询效率与避免LOCK发生
- 一起谈.NET技术，浅谈提升C#正则表达式效率
- AvoidRepeatSubmit-通过Javascript避免客户端重复提交请求
- JavaScript中双符号的运算详解
- 【R】提升R代码运算效率的11个实用方法
- 效率为王 分享几个提升php运行效率的代码规范写法详解
- JavaScript Memoization