防抖與節流 最基礎的效能優化

2022-07-18 19:57:12 字數 1374 閱讀 4914

//節流

varrun

=true

; document.getelementbyid(

'throttle

').onclick

=function

() run

=false

; settimeout(

function

(),1000

); }

//函式節流不管事件觸發有多頻繁,都會保證在規定時間內一定會執行一次真正的事件處理函式,

//而函式防抖只是在最後一次事件後才觸發一次函式。 比如在頁面的無限載入場景下,我們需要使用者在滾動頁面時,

//每隔一段時間發一次 ajax 請求,而不是在使用者停下滾動頁面操作時才去請求資料。這樣的場景,就適合用節流技術來實現。

}())

script

>

html

>

效能優化 防抖和節流

在連續觸發的事件中,事件處理函式的頻繁呼叫會加重瀏覽器或伺服器的效能負擔導致使用者體驗糟糕,有哪些連續觸發的事件呢 比如,瀏覽器滾動條的滾動事件 瀏覽器視窗調節的resize事件 輸入框內容校驗以及在移動端的touchmove事件等 所以,我們將採用防抖函式 debounce 和節流函式 throt...

JS效能優化 防抖和節流

防抖和節流嚴格算起來應該屬於效能優化的知識,但實際上遇到的頻率相當高,處理不當或者放任不管就容易引起瀏覽器卡死。舉個例子吧 監聽滾動條的高度 需求很簡單,直接寫 function showtop window.onscroll showtop 但是!你會發現只要你一改變高度,它就會列印一次高度,隨便...

效能 防抖和節流

為了提高頁面效能,有時需要對高頻率觸發的事件 scrllo,resize,mousemove,touchmove 進行防抖 debounce 或者節流 throttle 處理。這兩個概念很相似,但是他們是不同的概念 把一系列連續的事件,只處理一次,即只呼叫一次事件處理程式。強調一系列連續觸發的事件。...