前端效能——JS的防抖和節流是什麼？
數個月之前，在一次前端的效能優化中，接觸到了JS中防抖和節流，一開始還不明白他們的應用在哪裡，可後來才知道，這是前端中最基礎的效能優化，在繫結 scroll 、resize 這類事件時，當它發生時，它被觸發的頻次非常高，間隔很近。如果事件中涉及到大量的位置計算、DOM 操作、元素重繪等工作且這些工作無法在下一個 scroll 事件觸發前完成，就會造成瀏覽器掉幀。加之使用者滑鼠滾動往往是連續的，就會持續觸發 scroll 事件導致掉幀擴大、瀏覽器 CPU 使用率增加、使用者體驗受到影響。尤其是在涉及與後端的互動中，前端依賴於某種事件如resize，scroll，傳送Http請求，在這個過程中，如果不做防抖處理，那麼在事件觸發的一瞬間，會有很多個請求發過去，增加了服務端的壓力。今天又接觸到一個專案，裡面的響應式做的非常到位，同時效能優化做的非常好，所以想把JS的防抖和節流做一個總結。（大佬不喜勿噴）
一、函式防抖（debounce）
當持續觸發事件時，一定時間段內沒有再觸發事件，事件處理函式才會執行一次，如果設定的時間到來之前，又一次觸發了事件，就重新開始延時。如下圖，持續觸發scroll事件時，並不執行handle函式，當1000毫秒內沒有觸發scroll事件時，才會延時觸發scroll事件。
下面通過一段程式碼來演示一個防抖的例子
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> body{ height: 5000px; } </style> </head> <body> <script> function debounce(fn, wait) { var timeout = null; return function() { if(timeout !== null) clearTimeout(timeout); timeout = setTimeout(fn, wait); } } // 處理函式 function handle() { console.log(Math.random()); } // 滾動事件 window.addEventListener('scroll', debounce(handle, 1000)); </script> </body> </html>
大概的效果就是這個樣子：
這是我自己的執行結果：
二、函式節流（throttle）
當持續觸發事件時，保證一定時間段內只調用一次事件處理函式。節流通俗解釋就比如我們水龍頭放水，閥門一開啟，水嘩嘩的往下流，秉著勤儉節約的優良傳統美德，我們要把水龍頭關小點，最好是如我們心意按照一定規律在某個時間間隔內一滴一滴的往下滴。如下圖，持續觸發scroll事件時，並不立即執行handle函式，每隔1000毫秒才會執行一次handle函式。
時間戳方案
var throttle = function(func, delay) { var prev = Date.now(); return function() { var context = this; var args = arguments; var now = Date.now(); if (now - prev >= delay) { func.apply(context, args); prev = Date.now(); } } } function handle() { console.log(Math.random()); } window.addEventListener('scroll', throttle(handle, 1000));
定時器方案
var throttle = function(func, delay) {
var timer = null;
return function() {
var context = this;
var args = arguments;
if (!timer) {
timer = setTimeout(function() {
func.apply(context, args);
timer = null;
}, delay);
}
}
}
function handle() {
console.log(Math.random());
}
window.addEventListener('scroll', throttle(handle, 1000));時間戳+定時器
var throttle = function(func, delay) {
var timer = null;
var startTime = Date.now();
return function() {
var curTime = Date.now();
var remaining = delay - (curTime - startTime);
var context = this;
var args = arguments;
clearTimeout(timer);
if (remaining <= 0) {
func.apply(context, args);
startTime = Date.now();
} else {
timer = setTimeout(func, remaining);
}
}
}
function handle() {
console.log(Math.random());
}
window.addEventListener('scroll', throttle(handle, 1000));效果如下：
三、總結
函式防抖：將幾次操作合併為一此操作進行。原理是維護一個計時器，規定在delay時間後觸發函式，但是在delay時間內再次觸發的話，就會取消之前的計時器而重新設定。這樣一來，只有最後一次操作能被觸發。
函式節流：使得一定時間內只觸發一次函式。原理是通過判斷是否到達一定時間來觸發函式。
區別： 函式節流不管事件觸發有多頻繁，都會保證在規定時間內一定會執行一次真正的事件處理函式，而函式防抖只是在最後一次事件後才觸發一次函式。 比如在頁面的無限載入場景下，我們需要使用者在滾動頁面時，每隔一段時間發一次 Ajax 請求，而不是在使用者停下滾動頁面操作時才去請求資料。這樣的場景，就適合用節流技術來實現。