關于性能優化的那點事——函數節流

khlbat 發布于2019-08-20 10:31 / 3486人閱讀

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

函數節流 背景

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

場景

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

原理

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

實現 示例1

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

_.throttle接收三個參數, 第一次執行默認立刻執行一次fn
@params fn: 需要進行函數節流的函數;
@params wait: 函數執行的時間間隔, 單位是毫秒.
@params options: options有兩個選項, 分別是:
        {leading: false}: 第一次調用不執行fn
        {trailing: false}: 禁止最后一次延遲的調用


_.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() {
    //相關處理
}, 500));

示例2

《javascript設計模式與開發實戰》中對函數節流示例：

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

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

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

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

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

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

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

云服務器 GPU云服務器函數節流 js函數節流關于服務器的優化函數優化

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/80188.html

關于性能優化的那點事——函數防抖

摘要：函數防抖場景假設網站有個搜索框用戶輸入文本我們會自動聯想匹配出一些結果供用戶選擇我們可能首先想到的做法就是監聽事件然后異步查詢結果但是如果用戶快速的輸入了一串字符假設是個字符那么就會在瞬間觸發次請求這無疑不是我們想要的我們想要的是用戶停止輸函數防抖場景假設網站有個搜索框, 用戶輸入文本我們會自動聯想匹配出一些結果供用戶選擇,我們可能首先想到的做法就是監聽keypress事件, 然...

Stardustsky 2019-08-21 14:21 評論0 收藏0
關于性能優化的那點事——BigRender首屏渲染優化

摘要：首屏渲染優化背景一個龐大的頁面有時我們并不會滾動去看下面的內容這樣就造成了非首屏部分的渲染這些無用的渲染不僅包括圖片還包括其他元素甚至一些某些根據模塊請求比如理論上每增加一個都會增加渲染的時間并且影響著頁面打開的加載速度這時就需要一種辦法使 BigRender首屏渲染優化背景一個龐大的頁面, 有時我們并不會滾動去看下面的內容, 這樣就造成了非首屏部分的渲染, 這些無用的渲染不僅包括...

Markxu 2019-08-20 10:35 評論0 收藏0
關于localStorage面試的那點事

摘要：已經超出本地存儲限定大小可進行超出限定大小之后的操作，如下面可以先清除記錄，再次保存面試官一波素質三連對于只是會使用的同學來說，肯定是不得其解的。最近面試的時候關于html5API總會被問到localStorage的問題，對于一般的問題很簡單，無非就是 localStorage、sessionStorage和cookie這三個客戶端緩存的區別 localStorage的API，g...

timger 2019-08-01 17:57 評論0 收藏0
關于var，let，const的那點事

摘要：一直使用定義變量，的出現給變量定義增加了兩個大將，。聲明的變量，塊作用域，不重復聲明覆蓋，限制了變量的作用域，保證變量不會去污染全局變量，所以盡量將改為用。一直使用var定義變量，ES6的出現給變量定義增加了兩個大將let，const。那它們有什么區別呢。 1、const關鍵字它的作用就是定義一個常量,一旦定義無法更改，不能重復聲明覆蓋； showImg(https://segmen...

KavenFan 2019-08-20 14:26 評論0 收藏0
php 學習筆記之關于時區的那點事

摘要：科普一下什么是時區眾所周知地球繞著太陽轉的同時也會自轉因此同一時刻不同地區所接收到太陽照射的情況不同所以有的地區是日出有的地區是日落還有的地區可能是黑夜既然地球上的不同地區時間不同那總要有統一的時間刻度才能方便文化科技交流吧不然大家說的都是科普一下什么是時區眾所周知,地球繞著太陽轉的同時也會自轉,因此同一時刻不同地區所接收到太陽照射的情況不同,所以有的地區是日出,有的地區是日落,還...

xzavier 2019-07-01 12:50 評論0 收藏0