web优化 js性能高级篇

今天咱们继续上一个阶段关于web的性能优化,如何对js高级进行优化

（1）闭包

何为闭包; 一个拥有许多变量和绑定了这些变量的环境的表达式（一般是一个函数），于是这些变量也是该表达式的一部分.  我认为比较通俗的理解就是;

闭包就是可以读取其余函数内部变量的函数。

因为在Javascript语言中，只有函数内部的子函数才能读取局部变量，所以能够把闭包简单理解成"定义在一个函数内部的函数"。

因此，在本质上，闭包就是将函数内部和函数外部链接起来的一座桥梁。(@阮一峰)

闭包如何优化体如今性能里面？

一、匿名自执行函数

　　咱们知道全部的变量，若是不加上var关键字，则默认的会添加到全局对象的属性上去，这样的临时变量加入全局对象有不少坏处，

好比：别的函数可能误用这些变量；形成全局对象过于庞大，影响访问速度(由于变量的取值是须要从原型链上遍历的)。除了每次使用变量都是用var关键字外，咱们在实际状况下常常遇到这样一种状况，即有的函数只须要执行一次，其内部变量无需维护，

var data= {    
    table : [],    
    tree : {}    
};       
(function(dm){    
    for(var i = 0; i < dm.table.rows; i++){    
       var row = dm.table.rows[i];    
       for(var j = 0; j < row.cells; i++){    
           drawCell(i, j);    
       }    
    }    
})(data);  

咱们建立了一个匿名的函数，并当即执行它，因为外部没法引用它内部的变量，所以在函数执行完后会马上释放资源，关键是不污染全局对象。

二、结果缓存

咱们开发中会碰到不少状况，设想咱们有一个处理过程很耗时的函数对象，每次调用都会花费很长时间，那么咱们就须要将计算出来的值存储起来，当调用这个函数的时候，首先在缓存中查找，若是找不到，则进行计算，而后更新缓存并返回值，若是找到了，直接返回查找到的值便可。闭包正是能够作到这一点，由于它不会释放外部的引用，从而函数内部的值能够得以保留。

var CachedSearchBox = (function(){    
    var cache = {},    
       count = [];    
    return {    
       attachSearchBox : function(dsid){    
           if(dsid in cache){//若是结果在缓存中    
              return cache[dsid];//直接返回缓存中的对象    
           }    
           var fsb = new uikit.webctrl.SearchBox(dsid);//新建    
           cache[dsid] = fsb;//更新缓存    
           if(count.length > 100){//保正缓存的大小<=100    
              delete cache[count.shift()];    
           }    
           return fsb;          
       },    
       clearSearchBox : function(dsid){    
           if(dsid in cache){    
              cache[dsid].clearSelection();      
           }    
       }    
    };    
})();    
CachedSearchBox.attachSearchBox("input");    

 （2）Jquery样式选择器

jQuery选择器有关的性能问题是尽可能采用链式调用来操做和缓存选择器结果集。由于每个$()的调用都会致使一次新的查找，因此，采用链式调用和设置变量缓存结果集，减小查找，提高性能。

链式调用示例:

$(document).ready(function() {
  function stripe() {
    $('#news').find('tr.alt').removeClass('alt').end().find('tbody').each(function() {
        $(this).children(':visible').has('td').filter(':group(3)').addClass('alt');
   });
  }
 stripe();
});

经过链式调用，采用find(),end(),children(),has,filter()等方法，来过滤结果集，减小$()查找方法调用，提高性能。

缓存结果集示例：

$(document).ready(function() {
   var $news = $('#news');
   function stripe() {
      $news.find('tr.alt').removeClass('alt');
      $news.find('tbody').each(function() {
         $(this).children(':visible').has('td').filter(':group(3)').addClass('alt');
      });
   }
   stripe();
});

经过声明$news变量缓存$(‘#news’)结果集，从而提高后面结果集对象调用方法的性能。

（3）惰性载入函数 
①惰性载入表示函数执行的分支仅会发生一次：既第一次调用的时候。在第一次调用的过程当中，该函数会被覆盖为另外一个按合适方式执行的函数，这样任何对原函数的调用都不用再通过执行的分支了。 
■优势： 
□要执行的适当代码只有当实际调用函数时才进行。 
□尽管第一次调用该函数会因额外的第二个函数调用而稍微慢点，但后续的调用都会很快，因避免了多重条件。 

（4） 函数柯里化 定义：用于建立已经设置好了一个或多个参数的函数。函数柯里化的基本方法和函数绑定是同样的：使用一个闭包返回一个函数。二者的区别在于，当函数被调用时，返回函数还须要设置一些传入的参数。