如何使用函數來優化性能？

lncwwn 發布于2019-08-23 15:38 / 3381人閱讀

摘要：原理連續觸發事件，但是事件函數只在在規定的周期之內只執行一次。代碼實現使用在使用節流函數后，我們在暫停輸入的后就會輸入輸入框內的值，暫停時間小于，則不會輸出，將重新計算函數執行時間。使用分時函數這樣在調用分時函數后每隔創建個節點。

一、節流函數 1. 使用場景

DOM.onclick()事件，我們給一個DOM節點綁定了點擊事件，當點擊該元素時觸發事件函數的執行，但是當我們頻繁點擊該元素時，就會不斷觸發該點擊事件，如果該點擊事件觸發的事件函數是DOM元素的，就會造成很高的性能消耗，可能會造成頁面的卡頓。

所以此時我們應該限制該事件的觸發頻率，減少頁面的開銷。

2. 原理

連續觸發事件，但是事件函數只在在規定的周期之內只執行一次。

3. 代碼實現

function throttle(fn, wait = 500) {
    let lastTime = 0 // 初始化上一次調用的事件
    return function () {
        let args = [].slice.call(arguments) // 將類數組轉化為數組
        let nowTime = new Date().getTime() // 獲取當前時間
        if(nowTime - lastTime > wait) { 
            fn.apply(this, args)
            lastTime = nowTime // 把上一次調用時間重新賦值
        }
    }
}

// 使用
let btn = document.getElementById("btn")
let fn = function () {
    console.log(1)
}
btn.onclick = throttle(fn, 1000)

在給按鈕加上點擊事件后，即使一直不停的點擊按鈕，也只會每隔1000ms執行一次事件處理函數。

二、防抖函數 1.使用場景

例如我們在百度搜索的輸入框輸入我們想要搜索的內容，在我們停止輸入后一小段時間(delay)后就會得你輸入框得內容然后進行搜索，如果你在輸入后暫停的時間小于規定的時間(delay)，就會重新計算該時間。

2.原理

所謂防抖，就是指觸發事件后在 n 秒內函數只能執行一次，如果在 n 秒內又觸發了事件，則會重新計算函數執行時間。

3. 代碼實現

function debounce(fn, delay) {
    let timer = null
    return function () {
        let _self = this
        let args = [].slice.call(arguments)
        clearTimout(timer)
        timer = setTimout(function () {
            fn.apply(_self, args)
        }, delay)
    }
} 

// 使用
let inp = document.getElementById("inp")
function handler() {
    console.log(this.value)
}
inp.oninput = debounce(handler, 500)

在使用節流函數后，我們在暫停輸入的500ms后就會輸入輸入框內的值，暫停時間小于500ms，則不會輸出，將重新計算函數執行時間。

三、分時函數

比如我們在將一個很大的數據渲染成列表的時候，我們要求必須將所有數據渲染完成，不能使用懶加載，所以這樣當我們在短時間內往頁面添加大量的DOM節點的時候，顯然會造成瀏覽器的卡頓。

let arr = []
for(let a = 0; a < 1000; a++) {
    arr.push(a)
}
function render(data) {
    for(let i = 0; i < arr.length; i++) {
        let div = document.createElement("div")
        div.innerHTML = arr[i]
        document.body.appenChild(div)
    }
}
render(arr)

所以我們我們創建一個函數，然節點的添加分時進行，比如把在1s添加1000個節點改為每隔200ms添加20個節點。

let timeChunk = function (data, fn, count = 20, delay = 200) {
    let obj,timer
    let start = function () {
        for(let i = 0; i < Math.min(count, data.length); i++) {
            let obj = data.shift()
            fn(obj)
        }
    }
    return function () {
        timer = setInterval(function () {
            if(data.length === 0) {
                return clearInterval(timer)
            }
            start()
        }, delay)
    }
}

使用分時函數

let arr = []
for (let a = 0; a < 1000; a++) {
    arr.push(a)
}

function render(data) {
    let div = document.createElement("div")
    div.innerText = data
    document.body.appendChild(div)
}
let renderlist = timeChunk(arr, render, 20, 200)
renderlist()

這樣在調用分時函數后每隔200ms創建20個節點。

四、惰性函數

在前端開發中，因為瀏覽器的差異，一些嗅探工作是不可避免的，比如要實現一個在各個瀏覽器中都通用的添加事件函數。常見寫法：

let addEvent = function (element, type, handler) {
    if(window.addEventListener) {
        return element.addEventLisenter(type, handler, false)
    } else if (window.attachEvent) {
        return element.attachEvent("on"+type, handler)
    }
}

但是我們每次執行函數的時候都要進行分支判斷，然后當我們在確定了在哪一種瀏覽器中執行該函數的時候，我們只需要在第一次判斷，后面的使用都不用判斷，因為我們是在同一個瀏覽器執行該函數。

所以我們可以使用惰性加載函數，在函數體內往往都會有一些分支判斷，但是在第一次進入分支條件后，在函數內部會重寫這個函數，重寫之后就是我們所期望的函數，在下一次再進入函數的時候不用在進行分支判斷。

let addEvent = function (element, type, handler) {
    if(window.addEventListener) {
        addEvemt = function(element, type, handler) {
            element.addEventLisenter(type, handler, false)
        }
    } else if (window.attachEvent) {
        addEvent = function(element, type, handler) {
            element.attachEvent("on"+type, handler)
        }
    }
    addEvent(element, type, handler)
}

大家可以關注我的掘金地址

參考文獻

JavaScript設計模式與開發實踐

GPU云服務器云服務器函數優化性能優化企業使用云vps能帶來哪些好處優化系統性能

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

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

前端每周清單第 34 期：Vue 現狀盤點與 3.0 展望，React 代碼遷移與優化，圖片優化詳論

摘要：工程實踐立足實踐，提示實際水平內聯函數與性能很多關于性能優化的文章都會談及內聯函數，其也是常見的被詬病為拖慢性能表現的元兇之一不過本文卻是打破砂鍋問到底，論證了內聯函數并不一定就會拖慢性能，過度的性能優化反而會有損于應用性能。 showImg(https://segmentfault.com/img/remote/1460000011481413?w=1240&h=825); 前端每周...

CoderStudy 2019-08-21 16:56 評論0 收藏0
Hack on HHVM —— Facebook是如何優化PHP的

摘要：周四正式發布了編程語言，將靜態類型以及一些現代的語言特性引入了。這是對優化之路上的新里程碑。但是語言層面的優化限制太多，對而言還是不夠用。其次是優化運行的步驟。在這方面進行調整，可以提升運行的性能。值得注意的是，給的影響很大。 Facebook周四正式發布了Hack編程語言，將靜態類型以及一些現代的語言特性引入了PHP。這是Facebook對PHP優化之路上的新里程碑。 showIm...

lmxdawn 2019-06-27 10:36 評論0 收藏0
使用React.memo()來優化函數組件的性能

摘要：函數組件上面我們探討了如何使用和的方法優化類組件的性能。它的作用和類似，是用來控制函數組件的重新渲染的。其實就是函數組件的。原文鏈接: Improving Performance in React Functional Component using React.memo 原文作者: Chidume Nnamdi 譯者: 進擊的大蔥推薦理由: 本文講述了開發React應用時如...

BetaRabbit 2019-08-23 16:04 評論0 收藏0
高級前端面試題大匯總（只有試題，沒有答案）

摘要：面試題來源于網絡，看一下高級前端的面試題，可以知道自己和高級前端的差距。面試題來源于網絡，看一下高級前端的面試題，可以知道自己和高級前端的差距。有些面試題會重復。使用過的koa2中間件 koa-body原理介紹自己寫過的中間件有沒有涉及到Cluster 介紹pm2 master掛了的話pm2怎么處理如何和MySQL進行通信 React聲明周期及自己的理解如何...

kviccn 2019-08-23 13:41 評論0 收藏0
2018大廠高級前端面試題匯總

摘要：面試的公司分別是阿里網易滴滴今日頭條有贊挖財滬江餓了么攜程喜馬拉雅兌吧微醫寺庫寶寶樹海康威視蘑菇街酷家樂百分點和海風教育。（關注福利，關注本公眾號回復[資料]領取優質前端視頻，包括Vue、React、Node源碼和實戰、面試指導）本人于7-8月開始準備面試，過五關斬六將，最終抱得網易歸，深深感受到高級前端面試的套路。以下是自己整理的面試題匯總，不敢藏私，統統貢獻出來。面試的公司分...

zzir 2019-08-23 12:38 評論0 收藏0