前端性能優化：高頻執行事件/方法的防抖

來源：GBin1.com

上一篇咱們說了用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方法返回一個方法，用來包住你的回調函數，限制他的執行頻率。使用這個防抖方法，就可讓你寫的頻繁回調的方法不會妨礙用戶的瀏覽器！

下一篇，咱們將介紹網絡存儲中靜態緩存和非必要內容的優化方法。

via Nelly@極客標籤

來源：前端性能優化：高頻執行事件/方法的防抖