[js高手之路]性能优化技巧

所谓缓存，通俗点讲就是把已经做过的事情结果先暂时存起来，下次再做同样的事情，不用再重新去做，只要把之前的存的结果拿出来用即可，很明显大大提升了效率。他的应用场景非常广泛。如：

1、缓存ajax结果，大多数网站都会有产品推荐功能，比如按热销推荐，简单低效的做法，每次点击切换的时候，都要通过ajax去数据库中取出结果，其实他的结果并不是要实时去获取，完全可以用缓存技术保存起来，减少数据库处理压力

2、单例模式，也是缓存的应用

一、缓存原理与应用

我们先来一个的简单例子，比如，判断一个数是不是素数，普通的做法：

 1         function isPrime( n ){ 2             if( n ==1 ) { 3                 return false; 4             }else { 5                 var flag = true; 6                 for( var i = 2; i < n; i++ ){ 7                     if( n % i == 0 ) { 8                         flag = false; 9                         break;10                     }11                 }12                 return flag;13             }14         }15         alert( isPrime( 1 ) );16         alert( isPrime( 1 ) );

每次调用isPrime都需要去把这个函数完整的执行一遍，如果判断的素数比较大，那么程序每次都要做大量的循环判断计算，耗时很大。第一次为了获取到结果，肯定是要完整的执行一遍程序，而第二次做重复的事情，就没有必要再去完整的执行一次，我们完全可以把第一次的结果缓存起来，第二次再次判断1是不是素数，直接返回结果即可.

利用缓存技术，改进之后的素数判断：

 1         function isPrime(value){ 2             if ( !isPrime.answers ) isPrime.answers = {}; 3             if( isPrime.answers[value] != null ){ 4                 return isPrime.answers[value]; 5             } 6             var flag = value != 1; 7             for( var i = 2; i < value; i++ ){ 8                 if ( value % i == 0 ) { 9                     flag = false;10                     break;11                 }                    12             }13             return isPrime.answers[value] = flag;14         }15         alert( isPrime( 2 ) );16         alert( isPrime.answers[2] );

我们为函数动态添加一个属性answers，在第13行，存储每个被计算过的素数结果，下次再判断同样的素数，在第3行判断是否存着结果，然后返回即可，不用再重新做循环判断.

还有，javascript要做点东西，dom操作是很频繁的，如果获取同样的dom元素，完全可以采用缓存技术把他们存起来

html代码:

1     <input type="button" value="按钮1">    2     <input type="button" value="按钮2">    3     <input type="button" value="按钮3">    4     <input type="button" value="按钮4">    5     <input type="button" value="按钮5">

1         function getElements( name ) {2             if ( !getElements.cache ) getElements.cache = {};3             return getElements.cache[name] = 4                         getElements.cache[name]5                         || document.getElementsByTagName( name );6         }7 8         console.log( getElements( "input" ) );9         console.log( getElements.cache["input"].length );

第二次调用getElements( 'input' ) 直接就会从getElements.cache['input']把元素返回，不用再去页面查找dom元素。

二、函数重载原理与应用

所谓函数重载，通俗点理解，可以认为一个函数名，可以出现多种参数，实现不同的功能，比如，加法运算，1个数的时候，直接显示，2个数的时候，求2个数的和,

3个数的时候，求3个数的和。还有，在强类型(编译阶段确定类型）语言中，重载的参数是区分类型的.

在javascript中，默认是没有函数重载的，同名函数会产生覆盖，最后一个会把前面的函数覆盖.

通常，我们可以通过arguments来做文章:

 1         var obj = { 2             show : function(){ 3                 switch( arguments.length ){ 4                     case 0: 5                         alert( 'ghostwu' ); 6                         break; 7                     case 1: 8                         alert( arguments[0] ); 9                         break;10                     case 2:11                         alert( arguments[0] + arguments[1] );12                         break;13                 }14             }15         }16         obj.show(); //ghostwu17         obj.show( 'ghostwu' ); //ghostwu18         obj.show( 10, 20 ); //30

这样就实现了一个简单的重载，show方法，在不同的参数个数下，实现的功能不一样，但是这种重载方式，扩展性很差，如果有四个参数，5个参数，6个参数。。。。等等，那么就要添加分支了，接下来，我们就来看一个狂炫酷拽叼咋天的实现，不需要修改源码，可以任意增加函数重载功能.

 1         function addMethod( obj, name, fn ) { 2             var old = obj[name]; 3             obj[name] = function(){ 4                 if ( fn.length == arguments.length ){ 5                     return fn.apply( this, arguments ); 6                 }else if ( typeof old == 'function' ){ 7                     return old.apply( this, arguments ); 8                 } 9             }10         }11 12         var person = { userName : 'ghostwu' };13         addMethod( person, 'show', function(){14             alert( this.userName + '---->' + 'show1' );15         } );16         addMethod( person, 'show', function( str ){17             alert( this.userName + '---->' + str );18         } );19         addMethod( person, 'show', function( a, b ){20             alert( this.userName + '---->' + ( a + b ) );21         } );22         person.show();23         person.show( 10 );24         person.show( 10, 20 );

这样扩展的函数，如果再想添加4个，5个。。。任意参数的功能就非常的方便。完全不需要去函数体中修改，增加分支什么的.