經過函數節流與函數分時提高應用性能

時間 2019-11-10

原文原文鏈接

經過函數節流與函數分時提高應用性能

在例如表單自動補全，數據埋點，文章內容自動保存，視口監聽，拖拽，列表渲染等高頻操做時，若是同時有其它UI行爲佔據線程，瀏覽器端時常會出現卡頓現象，服務器端也面臨着較大壓力。這時，函數節流，與函數分時將成爲咱們的一大輔助。react

1、函數節流

看一則自動補全的例子後端

//自動補全
const input       = document.querySelector('#autocompleteSearch'),
      completeArr = []; //須要被渲染的補全提示數據

input.addEventListener('keydown', e => {
    
    const value = e.currentTarget.value,
          xhr   = new XMLHttpRequest();
    
    
    xhr.addEventListener('load', ()=> {
        //請求完成後，將數據裝載到數組中
        xhr.status === 200 && completeArr.push(xhr.responseText);
    });
    
    xhr.open('GET', 'http://api.com');
    xhr.send(value);
    
});

在這裏，我沒有提供具體的UI層的操做，只提供了觸發事件時的handler，實際的開發中可能還須要涉及要補全數據數組的渲染邏輯以及排序和清除邏輯，但這並不妨礙咱們理解本問題的過程。設計模式

能夠看到的是，爲了實時更新補全數據，每次當用戶按下按鍵時，咱們都要向服務器去發起一次請求。若是產品的用戶基數很大，併發一高，那就實在是有些坑後端隊友了。api

回想需求，咱們要根據用戶輸入的關鍵字像服務器索取補全的字段，反饋給用戶快速選擇。數組

實際上，在用戶輸入表單的過程當中，可能按下不少次按鍵纔會打出一個字，或者是打出了不少個字後，才能檢索出真整的數據。瀏覽器

基於這個角度來換一下思路，如何限制請求的發送呢？服務器

判斷value的長度，輸入兩個三個字以上，再向服務器發起請求

將事件的handler觸發頻率下降

第一種思路，不失爲是一種可行的方案，可是很難複用，並且用戶真實想要搜入的字數並不肯定。閉包

第二種思路，既能限制頻率，減小請求，還能近實時向用戶反饋，無視用戶輸入的字符串長度，還能夠實現高複用。併發

下面提供實現的方式，首先，實現函數節流：app

const throttle =  (fn, time = 1000)=> {
    let triggered = true,        // 首次觸發狀態的標識
        timer;                  // 定時器觸發標識
    return function () {
        if (triggered) {
            // 首次觸發 回調直接執行
            fn.apply(this, arguments);
            //執行後 使首次觸發標識爲假
            return triggered = false;
        }
        if (timer) {
            // 定時器標識 若是爲真 表明着以前的分流限制範圍 還沒有結束
            return false;
        }
        timer = setInterval(()=> {
            //若是定時器標識不爲真 則爲定時器賦上引用
            clearInterval(timer);
            // 取反定時器標識
            timer = !timer;
            // 執行回調
            fn.apply(self, arguments);
        }, time)
    }
    
};

上述代碼，利用了閉包與高階函數，限制了函數的觸發，關鍵點在於首次觸發與以前的節流是否結束的判斷。

改造一下上面的自動補全代碼。

const input          = document.querySelector('#autocompleteSearch'),
      completeArr    = [],
      keydownHandler = throttle(e => {
    
          const value = e.currentTarget.value,
                xhr   = new XMLHttpRequest();
    
    
          xhr.addEventListener('load',()=> {
              //請求完成後，將數據裝載到數組中
              xhr.status === 200 && completeArr.push(xhr.responseText);
          });
    
          xhr.open('GET', 'http://api.com');
          xhr.send(value);
    
      }); //須要被渲染的補全提示數據

input.addEventListener('keydown',keydownHandler);


function throttle(fn, time = 1000) {
    let triggered = true,        // 首次觸發狀態的標識
        timer;                  // 定時器觸發標識
    return function () {
        if (triggered) {
            // 首次觸發 回調直接執行
            fn.apply(this, arguments);
            //執行後 使首次觸發標識爲假
            return triggered = false;
        }
        if (timer) {
            // 定時器標識 若是爲真 表明着以前的分流限制範圍 還沒有結束
            return false;
        }
        timer = setInterval(()=> {
            //若是定時器標識不爲真 則爲定時器賦上引用
            clearInterval(timer);
            // 取反定時器標識
            timer = !timer;
            // 執行回調
            fn.apply(self, arguments);
        }, time)
    }
    
}

如此，實現了keydown事件觸發的頻率，固然，一些其餘高頻的事件回調依舊適合，咱們能夠根據具體的業務場景，來傳入合理的time值，達到節流，既減輕了服務器端的壓力，又提高了性能，例如上面的自動補全，1秒的延遲，用戶幾乎感覺不到，何樂而不爲呢？

2、分時函數

上面那種隱藏在用戶操做背後，節流函數是一個很好的解決方案。同時，咱們可能會面臨另一種場景，便是一次性渲染。

好比說，咱們有這樣的需求，後臺給了咱們2000行記錄的數據，要一次性用列表所有渲染出來。

2000行數據可不是一個小數目，若是裏面內嵌了不少子節點邏輯，那麼頗有可能咱們也許要渲染上萬個節點，衆所周知，DOM但是瀏覽器環境性能的最大損耗者。爲了提高用戶體驗與性能，一般狀況下，我會使用兩種操做。

使用DOM的fragment，避免每次節點生成時的反覆插入，能夠在合理的時機向相應的節點插入，這方面的資料不少，能夠自行查閱。
使用函數分時來分批處理渲染邏輯

先看如何在不分時的狀況下操做節點：

const
    list        = document.querySelector('#ul'),
    virtualList = document.createDocumentFragment(), // 虛擬dom容器
    listArr     = [
        {text: 'hello react!'}
        // 假設這裏有2000條記錄
    ];

for (let i of listArr) {
    // 使用for of 遍歷數據
    const li       = document.createElement('li');
    li.textContent = i;
    // 插入虛擬容器中
    virtualList.appendChild(li);
    
}

// 把載滿節點的虛擬容器 插入到真實的列表元素中
list.appendChild(virtualList);

再來看分函數分時的實現:

function chunkFunc({fn, arr, count = arr.length, time = 200, sCb, aCb}) {
    
    /*
     * @params
     * fn   : 須要被分時的處理邏輯
     * arr  : 所有的業務數據
     * count: 每次分時的具體數量
     *        假設總共2000條數據
     *        咱們能夠設定
     *        每次分紅200條執行
     *        默認爲業務數據的長度
     * time : 分時的時間間隔 默認200 毫秒
     * sCb  : singleCallback 每次分時遍歷結束時執行的回調
     * aAb  : allCallback 所有遍歷結束時須要作的回調
     * */
    
    let
        timer,      // 用以分時的定時器標識
        start;      // 遍歷處理邏輯
    
    start = () => {
        for (let i = 0; i < count; i++) {
            //若是count給了值 咱們循環count次 每次循環都從業務數據裏取值 而後執行處理邏輯
            fn(arr.shift());
        }
        //分時遍歷結束 若是有回調 執行回調
        sCb && sCb();
    };
    
    return () => {
        // 默認每200毫秒執行一次
        timer = setInterval(function () {
            // 若是原始數據被取空了 則中止執行
            if (arr.length === 0) {
                aCb && aCb();
                return clearInterval(timer)
            }
            // 否則 執行遍歷邏輯
            start();
        }, time);
    }
}

實現方式很簡單，即根據用戶給定的分時單位與時間，利用定時器從新包裝用戶處理邏輯，這裏咱們須要將渲染邏輯稍微改動，抽離出遍歷邏輯，添加遍歷結束回調方法(可選)。

重構代碼以下：

const
    list    = document.querySelector('#ul'),
    listArr = [
        {text: 'hello react!'}
        // 假設這裏有2000條記錄
    ];

let virtualDOM = document.createDocumentFragment();


chunkFunc({
    fn(data) {
        // 生成節點邏輯
        const li       = document.createElement('li');
        li.textContent = data.text;
        virtualDOM.appendChild(li);
    },
    sCb() {
        // 分時遍歷結束 將虛擬節點 插入LIST
        list.appendChild(virtualDOM);
        // 重置虛擬節點 避免重複生成節點
        virtualDOM = document.createDocumentFragment();
    },
    aCb() {
        // 最終結束後 解除引用
        virtualDOM = null;
    },
    arr  : listArr,
    count: 8,
    time : 300,
})();

經過抽離了插入、生成節點的邏輯、給出不一樣階段的回調，咱們成功的將原本須要一次性生成的節點，分批生成，提升了性能和用戶體驗。