前端性能优化：高频执行事件/方法的防抖

上一篇我们说了用InnerHTML和DocumentFragment来减少DOM注入的次数，这次我们说一说如何处理高频事件触发时的优化。

高频执行事件/方法的防抖

通常，开发人员会在有用户交互参与的地方添加事件，而往往这种事件会被频繁触发。想象一下窗口的resize事件或者是一个元素的onmouseover事件 - 他们触发时，执行的非常迅速，并且触发很多次。如果你的回调过重，你可能使浏览器死掉。

这就是为什么我们要引入防抖。

防抖可以限制一个方法在一定时间内执行的次数。以下代码是个防抖示例：

 
 

  
  

   
   
// 取自 UnderscoreJS 实用框架
function debounce(func, wait, immediate) {
    var timeout;
    return function() {
        var context = this, args = arguments;
        var later = function() {
            timeout = null;
            if (!immediate) func.apply(context, args);
        };
        var callNow = immediate && !timeout;
        clearTimeout(timeout);
        timeout = setTimeout(later, wait);
        if (callNow) func.apply(context, args);
    };
  }
 
// 添加resize的回调函数，但是只允许它每300毫秒执行一次
window.addEventListener('resize', debounce(function(event) {
 
    // 这里写resize过程
 
}, 300));
  
  
  
  

   
   

    
    

     
     

     
     

    
    
   
   
  
  
 
 

debounce方法返回一个方法，用来包住你的回调函数，限制他的执行频率。使用这个防抖方法，就可以让你写的频繁回调的方法不会妨碍用户的浏览器！