JavaScript优化之惰性载入函数

在JavaScript中有些内存只需执行一遍即可,如浏览器类型检测是最常用的一个功能,因为我们使用Ajax的时候需要检测浏览器的内置的XHR。我们可以在第一次检测的时候记录下类型,往后在使用Ajax的时候就不需要再去检测浏览器类型了。在JavaScript中就算只有一个if也总比没有if的语句效率要高。

普通Ajax方法

/**
 * JS惰性函数
 * 琼台博客 www.qttc.net
 */
 
function ajax(){
  if(typeof XMLHttpRequest != "undefined"){
    return new XMLHttpRequest();    
  }else if(typeof ActiveXObject != "undefined"){
    if(typeof arguments.callee.activeXString != "string"){
      var versions = ["MSXML2.XMLHttp.6.0","MSXML2.XMLHttp.3.0","MSXML2.XMLHttp"];    

      for(var i=0,k=version.length;i<k;i++){
        try{
          new ActiveXObject(versions[i]); 
          arguments.callee.activeXString = versions[i];
          break;
        }catch(ex){
          throw ex;   
        }
      }
    }   

    return new ActiveXObject(arguments.callee.activeXString);
  }else{
    throw "No XHR object";  
  }
}

每次调用ajax()函数都要对浏览器内置的XHR检查,效率不高。

使用惰性方式的方法

/**
 * JS惰性函数
 * 琼台博客 www.qttc.net
 */
 
function ajax(){
  if(typeof XMLHttpRequest != "undefined"){
    ajax = function(){
      return new XMLHttpRequest();    
    };
  }else if(typeof ActiveXObject != "undefined"){
    ajax = function(){
      if(typeof arguments.callee.activeXString != "string"){
        var versions = ["MSXML2.XMLHttp.6.0","MSXML2.XMLHttp.3.0","MSXML2.XMLHttp"];    

        for(var i=0,k=version.length;i<k;i++){
          try{
            var xhr = new ActiveXObject(versions[i]);   
            arguments.callee.activeXString = versions[i];
            return xhr;
          }catch(ex){
            throw ex;   
          }
        }
      }   

      return new ActiveXObject(arguments.callee.activeXString);
    }
  }else{
    ajax = function(){
      throw "No XHR object";  
    }
  }

  return ajax();
}

在第二个惰性方法中if的每个分支都会为ajax()变量赋值,有效覆盖了原有函数,最后一步调用新的函数。下一次调用的ajax()的时候,就直接调用变量。

优化重点

要执行特定代码只有实际调用才执行,而某些JavaScript库一开始就检测浏览器,预先设置好。

由于加了复杂的判断所以首次运行速度慢,但后边的多册运行的效率会更快。

分享

TITLE: JavaScript优化之惰性载入函数

LINK: https://www.qttc.net/195-javascript-optimize.html

NOTE: 原创内容,转载请注明出自琼台博客