JavaScript 性能优化技巧：函数节流

JavaScript 性能优化技巧：函数节流

古木天琪 标签: JavaScript， 性能， JS性能， 回调函数， 延时函数

 

函数节流技术的主要思路是，通过一个定时器，阻断连续重复的函数调用。对于我们自己内部使用的函数，这通常意义不大，也不推荐使用这个技术，它可能会丢失对某些数据的处理。但是对于在用户界面调用的函数，却非常有意义。例如一个 mousemove 或者 IE 中 resize 事件的监听函数。

这类事件监听函数往往伴随着两个主要特征：1. 短时间内连续多次重复触发 ; 2. 大量的 DOM 操作。众所周知，DOM 操作对内存和 CPU 的开销是比较大的，特别是当同时满足特征1时，往往给浏览器造成不小的压力。函数节流技术的意义在于在用户察觉范围外，降低函数调用的频率，从而提升性能。

这个技巧的大概模式如下面这样：

  
  
  
  

   
   
   
   
    1 
   
   
   
   var processor = {
   
   
   
   

   
   
   
    2     timeoutId: 
   
   
   
   null,
   
   
   
   

   
   
   
    3                    
   
   
   
   

   
   
   
    4     performProcessing: 
   
   
   
   function(){
   
   
   
   

   
   
   
    5             
   
   
   
   //
   
   
   
    要执行的代码
   
   
   
   

   
   
   
    6 
   
   
   
       },
   
   
   
   

   
   
   
    7 
   
   
   
   

   
   
   
    8     process: 
   
   
   
   function(){
   
   
   
   

   
   
   
    9         clearTimeout(
   
   
   
   this.timeoutId);
   
   
   
   

   
   
   
   10         
   
   
   
   this.timeoutId  = setTimeout(
   
   
   
   function(){
   
   
   
   

   
   
   
   11             processor.performProcessing();
   
   
   
   

   
   
   
   12         }, 100);
   
   
   
   

   
   
   
   13     }
   
   
   
   

   
   
   
   14 };
   
   
   
   

   
   
   
   15                    
   
   
   
   

   
   
   
   16 
   
   
   
   //
   
   
   
   调用
   
   
   
   

   
   
   
   17 
   
   
   
   processor.process();
  
  
  
  

performProcessing 是真正要调用的函数，而程序的入口在 process，每次进入 process，真正要调用的函数 performProcessing 都会被延迟 100 毫秒执行，如果在此期间，process 再次被调用，则会重置前一次的计时器，重新开始计时，这样保证了 performProcessing 中的代码至少要间隔 100 毫秒才会被执行一次，原理非常的简单，下面这个函数也是利用这个原理，通过闭包达到了同样的目的，它接受两个参数，第一个是要真正要执行的函数，第二个是间隔的时间。

  
  
  
  

   
   
   
   
   function throttle(fn, delay) {
   
   
   
   
    
   
   
   
   var timer = 
   
   
   
   null;
   
   
   
   
    
   
   
   
   return 
   
   
   
   function () {
   
   
   
   
        
   
   
   
   var context = 
   
   
   
   this, args = arguments;
   
   
   
   
        clearTimeout(timer);
   
   
   
   
        timer = setTimeout(
   
   
   
   function () {
   
   
   
   
        fn.apply(context, args);
   
   
   
   
    }, delay);
   
   
   
   
  };
   
   
   
   
}
  
  
  
  

另外，有人为 jQuery 写了相同功能的插件：点击这里传送到 jQuery plugins

Google Closure Library 也有类似的 API：点击这里传送到 Google Code