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

叁歲伎倆 2022-01-17 10:51 173阅读 0赞

日期：2013-6-25  来源：[GBin1.com][]

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

![前端性能优化：高频执行事件/方法的防抖][title.jpg]

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

通常，开发人员会在有用户交互参与的地方添加事件，而往往这种事件会被频繁触发。想象一下窗口的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方法返回一个方法，用来包住你的回调函数，限制他的执行频率。使用这个防抖方法，就可以让你写的频繁回调的方法不会妨碍用户的浏览器！

下一篇，我们将介绍网络存储中静态缓存和非必要内容的优化方法。

via [ Nelly@][Nelly][极客标签 ][Nelly]

来源：[前端性能优化：高频执行事件/方法的防抖][GBin1.com]

[GBin1.com]: http://www.gbin1.com/technology/javascript/20130618-front-end-performance-optimization-2/
[InnerHTML_DocumentFragment_DOM]: http://www.gbin1.com/technology/javascript/20130619-front-end-performance-optimization-1
[title.jpg]: http://www.gbin1.com/technology/javascript/20130618-front-end-performance-optimization-2/title.jpg
[Nelly]: http://www.gbtags.com/gb/share/1217.htm