js性能优化之函数缓存

      所谓函数缓存，就是将函数运算过的结果缓存起来，这种做法是典型的用内存去换取性能的手段，常用于缓存数据计算结果和缓存对象。下面我们来看看一个使用例子：缓存jQuery对象。我们先来看一段代码：

<pre name="code" class="javascript"><span style="font-size:18px;color:#75715e;">function a(){</span><pre name="code" class="javascript"><span style="font-size:18px;"><span style="color:#ff0000;">$('#div')</span><span style="color: rgb(117, 113, 94); font-family: Arial, Helvetica, sans-serif;">.click(function(){</span></span>

// do something});}function b(){

<span style="font-size:18px;"><span style="color:#ff0000;">$('#div')</span><span style="color: rgb(117, 113, 94); font-family: Arial, Helvetica, sans-serif;">.animate({</span></span>

// code .....},1000);

}

    jQuery的$(selector)是一个工厂函数，该函数会构造一个与selector对应的对象，上面的代码用了两次 $('#div')，会产生两个不同的对象。这时，就造成了内存和CPU资源的浪费，因为我们为了操作同一个DOM元素而构造了两个对象。为了能够用一次$函数，就能实现上面的代码，我们得到下面的代码：

<pre name="code" class="javascript"><pre name="code" class="javascript"><span style="font-size:18px;"><span style="color:#75715e;">var </span><span style="color:#ff0000;">div</span><span style="color:#75715e;"> = $('#div');function a(){</span></span><pre name="code" class="javascript"><pre name="code" class="javascript"><span style="font-size:18px;"><span style="color:#ff0000;">div</span><span style="color: rgb(117, 113, 94); font-family: Arial, Helvetica, sans-serif;">.click(function(){</span></span>

// do something});

<span style="font-size:18px;color:#75715e;">}</span>

<span style="font-size:18px;color:#75715e;"></span>

<span style="font-size:18px;color:#75715e;">function b(){</span><pre name="code" class="javascript"><pre name="code" class="javascript"><span style="font-size:18px;"><span style="color:#ff0000;">div</span><span style="color: rgb(117, 113, 94); font-family: Arial, Helvetica, sans-serif;">.animate({</span></span>

// code .....

<span style="font-size:18px;">},1000);</span>

}

     上面的代码，用一个变量div将$('#div')返回的对象缓存起来，替代原来需要使用$('#div')的地方，避免了构造2个jQuery对象，达到了提高性能的目的。但是，这种做法也有一些不足，如果代码一多，出现很多个selector不同jQuery对象，那我们就需要使用大量的变量。为了解决这个问题，函数缓存就派上用场了。代码及解释如下：

<span style="font-size:18px;">function w(<span style="color: rgb(117, 113, 94);">selector</span>){           if(!w.cache) w.cache = {};  //如果函数没有cache属性，则创建一个cache属性，值为一个空对象</span>

<span style="font-size:18px;"></span><pre name="code" class="javascript" style="color: rgb(117, 113, 94);"><span style="font-size:18px;">//如果selector已经存在于w.cache中，则返回缓存结果；如果</span><span style="font-size: 18px; font-family: Arial, Helvetica, sans-serif;">缓存中</span><span style="font-size: 18px; font-family: Arial, Helvetica, sans-serif;">没有，则调用jQuery方法，将</span><span style="font-size: 18px; font-family: Arial, Helvetica, sans-serif;">$(selector)缓存在w.cache中，并返回给函数w。</span>

return w.cache[selector] = w.cache[selector] || $(selector);
}

     之前的代码就可以改成：

function a(){   w('#div').click(function(){    // do something});}function b(){   w('#div').animate({     // code ....},1000);}

     现在的代码就比之前的简洁多了，而且性能也得到了提高，也不用使用多余的变量。

     缓存的优势不言而喻，当然缺点也有，至于什么时候该用缓存，就见仁见智了。