關(guān)于性能優(yōu)化的那點事——函數(shù)節(jié)流

khlbat 發(fā)布于2019-08-20 10:31 / 3480人閱讀

摘要：函數(shù)節(jié)流背景中的函數(shù)大多數(shù)情況下都是由用戶主動調(diào)用觸發(fā)的除非是函數(shù)本身的實現(xiàn)不合理否則一般不會遇到跟性能相關(guān)的問題但在少數(shù)情況下函數(shù)的觸發(fā)不是由用戶直接控制的在這些場景下函數(shù)可能被非常頻繁調(diào)用而造成大的性能問題場景事件事件滾動事件共同的特征

函數(shù)節(jié)流 背景

javascript中的函數(shù)大多數(shù)情況下都是由用戶主動調(diào)用觸發(fā)的, 除非是函數(shù)本身的實現(xiàn)不合理, 否則一般不會遇到跟性能相關(guān)的問題,但在少數(shù)情況下, 函數(shù)的觸發(fā)不是由用戶直接控制的. 在這些場景下, 函數(shù)可能被非常頻繁調(diào)用, 而造成大的性能問題.

場景

window.onresize事件
mousemove事件
scroll滾動事件
共同的特征：高頻觸發(fā)事件函數(shù), 若事件函數(shù)里附帶DOM相關(guān)操作, 會造成非常大的性能消耗.

原理

將即將被執(zhí)行的函數(shù)使用setTimeout延遲一段時間執(zhí)行, 如果該次延遲執(zhí)行還沒有完成, 則忽略接下來調(diào)用該函數(shù)的請求.

實現(xiàn) 示例1

underscore.js的函數(shù)節(jié)流定義: _.throttle(fn, wait, [options]);

_.throttle接收三個參數(shù), 第一次執(zhí)行默認(rèn)立刻執(zhí)行一次fn
@params fn: 需要進(jìn)行函數(shù)節(jié)流的函數(shù);
@params wait: 函數(shù)執(zhí)行的時間間隔, 單位是毫秒.
@params options: options有兩個選項, 分別是:
        {leading: false}: 第一次調(diào)用不執(zhí)行fn
        {trailing: false}: 禁止最后一次延遲的調(diào)用


_.throttle = function(fn, wait, options) {
    var context,
        args,
        result,
        timeout = null,
        previous = 0;

    if(!options) {
        options = {};
    }

    var later = function() {
        previous = options.leading === false ? 0 : _.now();
        timeout = null;
        result = fn.apply(context, args);

        if(!timeout) {
            context = args = null;
        }
    };

    return function() {
        var now = _.now();
        if(!previous && options.leading === false) {
            previous = now;
        }

        var remaining = wait - (now - previous);
        context = this;
        args = arguments;

        if(remaining <= 0 || remaining > wait) {
            if(timeout) {
                clearTimeout(timeout);
                timeout = null;
            }
            previous = now;
            result = fn.apply(context, args);

            if(!timeout) {
                context = args = null;
            } else if(!timeout && options.trailing !== false) {
                timeout = setTimeout(later, remaining);
            }
            return result;
        }
    };
};

// demo:
$(window).scroll(_.throttle(function() {
    //相關(guān)處理
}, 500));

示例2

《javascript設(shè)計模式與開發(fā)實戰(zhàn)》中對函數(shù)節(jié)流示例：

throttle函數(shù)接收兩個參數(shù)
@params fn: 需要被延遲執(zhí)行的函數(shù);
@params interval: 延遲執(zhí)行的時間;

var throttle = function(fn, interval) {
    var _self = fn,            // 保存需要被延遲執(zhí)行的函數(shù)引用
        timer,                // 計時器
        firstTime = true;    // 是否第一次調(diào)用

    return function() {
        var args = arguments,
            _this = this;

        if(firstTime) {        // 如果是第一次調(diào)用, 不需要延遲執(zhí)行
            _self.apply(_this, args);
            return firstTime = false;
        }

        if(timer) {            // 如果定時器還在, 說明前一次延遲執(zhí)行還未完成
            return false;
        }

        timer = setTimeout(function() {
            clearTimeout(timer);
            timer = null;
            _self.apply(_this, args);
        }, interval || 500);
    };
};

// demo:
window.onresize = throttle(function() {
    console.log(1);
}, 500);