數個月之前，在一次前端的效能優化中，接觸到了js中防抖和節流，一開始還不明白他們的應用在**，可後來才知道，這是前端中最基礎的效能優化，在繫結 scroll 、resize 這類事件時，當它發生時，它被觸發的頻次非常高，間隔很近。如果事件中涉及到大量的位置計算、dom 操作、元素重繪等工作且這些工作無法在下乙個 scroll 事件觸發前完成，就會造成瀏覽器掉幀。加之使用者滑鼠滾動往往是連續的，就會持續觸發 scroll 事件導致掉幀擴大、瀏覽器 cpu 使用率增加、使用者體驗受到影響。尤其是在涉及與後端的互動中，前端依賴於某種事件如resize，scroll，傳送http請求，在這個過程中，如果不做防抖處理，那麼在事件觸發的一瞬間，會有很多個請求發過去，增加了服務端的壓力。今天又接觸到乙個專案，裡面的響應式做的非常到位，同時效能優化做的非常好，所以想把js的防抖和節流做乙個總結。（大佬不喜勿噴）
當持續觸發事件時，一定時間段內沒有再觸發事件，事件處理函式才會執行一次，如果設定的時間到來之前，又一次觸發了事件，就重新開始延時。如下圖，持續觸發scroll事件時，並不執行handle函式，當1000毫秒內沒有觸發scroll事件時，才會延時觸發scroll事件。
下面通過一段**來演示乙個防抖的例子
這是我自己的執行結果：
當持續觸發事件時，保證一定時間段內只呼叫一次事件處理函式。節流通俗解釋就比如我們水龍頭放水，閥門一開啟，水嘩嘩的往下流，秉著勤儉節約的優良傳統美德，我們要把水龍頭關小點，最好是如我們心意按照一定規律在某個時間間隔內一滴一滴的往下滴。如下圖，持續觸發scroll事件時，並不立即執行handle函式，每隔1000毫秒才會執行一次handle函式。
var throttle = function(func, delay) }}
function handle()
window.addeventlistener('scroll', throttle(handle, 1000));
var throttle = function(func, delay) , delay);}}
}function handle()
window.addeventlistener('scroll', throttle(handle, 1000));
var throttle = function(func, delay) else
}}function handle()
window.addeventlistener('scroll', throttle(handle, 1000));
函式防抖：將幾次操作合併為一此操作進行。原理是維護乙個計時器，規定在delay時間後觸發函式，但是在delay時間內再次觸發的話，就會取消之前的計時器而重新設定。這樣一來，只有最後一次操作能被觸發。
函式節流：使得一定時間內只觸發一次函式。原理是通過判斷是否到達一定時間來觸發函式。
區別：函式節流不管事件觸發有多頻繁，都會保證在規定時間內一定會執行一次真正的事件處理函式，而函式防抖只是在最後一次事件後才觸發一次函式。 比如在頁面的無限載入場景下，我們需要使用者在滾動頁面時，每隔一段時間發一次 ajax 請求，而不是在使用者停下滾動頁面操作時才去請求資料。這樣的場景，就適合用節流技術來實現。
會定期推送js、vue、react、node、演算法、面試等大前端技術部落格、精選文章！
JS效能優化 防抖和節流
防抖和節流嚴格算起來應該屬於效能優化的知識，但實際上遇到的頻率相當高，處理不當或者放任不管就容易引起瀏覽器卡死。舉個例子吧 監聽滾動條的高度 需求很簡單，直接寫 function showtop window.onscroll showtop 但是！你會發現只要你一改變高度，它就會列印一次高度，隨便...
防抖和節流 什麼是防抖和節流
目錄二 節流 有這樣一種情況，想象有乙個表單，點選提交按鈕就傳送請求給伺服器。如果使用者在很短的時間間隔內 手抖 點選了多次，又或者是惡意點選，那麼就將傳送多個請求。該行為將造成伺服器額外的不必要負載。所謂防抖，實際上就是是處理這種常見的情況的描述。submit該段 當點選submit按鈕的時候，將...
效能 防抖和節流
為了提高頁面效能，有時需要對高頻率觸發的事件 scrllo,resize,mousemove,touchmove 進行防抖 debounce 或者節流 throttle 處理。這兩個概念很相似，但是他們是不同的概念 把一系列連續的事件，只處理一次，即只呼叫一次事件處理程式。強調一系列連續觸發的事件。...