zoukankan      html  css  js  c++  java
  • [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(); //ghostwu
    17         obj.show( 'ghostwu' ); //ghostwu
    18         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个。。。任意参数的功能就非常的方便。完全不需要去函数体中修改,增加分支什么的.

    作者:ghostwu, 出处:http://www.cnblogs.com/ghostwu 博客大多数文章均属原创,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文连接,否则保留追究法律责任的权利
  • 相关阅读:
    一、Django CBV and Django RestFramework
    Web框架及Django初始化
    HTTP协议
    Mysql之存储引擎
    Django之ORM字段相关
    Django之视图
    Django之初步实现登录功能,APP及ORM
    jQuery
    C#基础:飞行棋游戏
    C#基础练习
  • 原文地址:https://www.cnblogs.com/PopularProdigal/p/7495671.html
Copyright © 2011-2022 走看看