如何提升JavaScript的运行速度(递归篇)

作者:Nicholas C. Zakas 来源:nczonline.net 时间:2010-05-17 13:30:00 

影响 JavaScript性能的另外一个杀手就是递归,在上一节中提到采用memoization技术可以优化计算数值的递归函数,但memoization 不是万能的,不是所有的递归函数都可以用memoization技术优化,本文介绍了这些情况,并介绍了解决办法,就是将递归转换为迭代,同时需要注意,本文末尾介绍的方案不是最终的方案,还需要和上一节优化循环的方案综合起来才能达到最佳效果。

以下是对原文的翻译:

递归是拖慢脚本运行速度的大敌之一。太多的递归会让浏览器变得越来越慢直到死掉或者莫名其妙的突然自动退出,所以我们一定要解决在JavaScript中出现的这一系列性能问题。在这个系列文章的第二篇中,我曾经简短的介绍了如何通过memoization技术来替代函数中太多的递归调用。memoization是一种可以缓存之前运算结果的技术,这样我们就不需要重新计算那些已经计算过的结果。对于通过递归来进行计算的函数,memoization简直是太有用了。我现在使用的memoizer是由 Crockford写的,主要应用在那些返回整数的递归运算中。当然并不是所有的递归函数都返回整数,所以我们需要一个更加通用的memoizer()函数来处理更多类型的递归函数。

function memoizer(fundamental, cache) {  cache = 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来说是很重要的,因为很多东西在执行环境中是受到限制的(the importance in JavaScript is greater, though, because the resources of the execution environment are so restrictive.)。让我们回顾一个典型的递归算法,比如说归并排序,在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次调用。在这种情况下,我们的解决方案是将递归算法转换为迭代算法,也就是说要引入一些循环(关于算法,可以参考这篇《List Processing: Sort Again, Naturally》):

// 采用迭代实现的归并排序算法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和迭代是代替递归的两种解决方案,最直接的结果当然就是避免那个提示脚本失控的对话框。 (翻译:明达)

标签:递归,javascript,速度
0
投稿

猜你喜欢

  • oracle SQL命令大全

    2009-07-02 11:55:00
  • 教你如何升级SQL Server数据库系统

    2009-01-19 14:42:00
  • IE9四大渲染引擎模式

    2010-04-20 16:57:00
  • 如何恢复/修复MS SQL数据库的MDF文件

    2007-10-30 13:52:00
  • 简易的全屏透明遮罩(lightBox)

    2010-06-09 20:56:00
  • js 返回 utf-8 字符编码是多少个字节, 函数 fUtf8BoundCheck

    2010-07-31 18:59:00
  • 什么是XSL?

    2007-11-05 19:47:00
  • 推荐一篇不错的新手asp编程的基本法则

    2011-04-15 11:08:00
  • 使用CSS3和RGBa创建超酷的按钮

    2009-06-02 12:41:00
  • 基于生活形态的用户分群研究

    2009-12-30 16:54:00
  • Win7或Windows server 2008中IIS7支持ASP+Access解决方法

    2012-03-27 18:31:27
  • YUI 学习笔记:Event

    2009-02-21 11:15:00
  • js图片水平翻转后垂直翻反转的特效代码

    2009-03-06 15:33:00
  • 如何“看看”服务器上的那个文件还在不在?

    2009-11-02 20:17:00
  • 让ASP也支持动态include文件

    2008-05-08 13:00:00
  • Form Post提交容量大的数据

    2011-03-31 10:53:00
  • asp 去掉html中的table正则代码函数

    2011-04-06 10:48:00
  • 思考如何提高交互设计水平?

    2009-12-08 12:18:00
  • thinkphp(php)插件钩子(hooks)分析的简单实现机制

    2023-05-25 09:27:58
  • ASP新闻分页,将一篇过长的文章分页,生成静态页面

    2011-04-10 11:14:00
  • asp之家 网络编程 m.aspxhome.com